slideleft.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. window.slideleft = (function($) {
  2. var listItem = $('.weui_cell_bd'),
  3. listOpts = $('.slideleft');
  4. var onthel = false, // 是否处于最左端
  5. isScroll = false, // 列表是否滚动状态
  6. initX = 0, // 初始X坐标
  7. initY = 0, // 初始Y坐标
  8. endX = 0, // 结束时X坐标
  9. endY = 0, // 结束时Y坐标
  10. moveX = 0, // listItem 移动的距离
  11. expandLi = null; // 是否存在展开的list
  12. var slideMaxWid = listOpts.width();
  13. var handleSlide = (function() {
  14. listItem.on('touchstart',function(e){
  15. // 判断有无已经展开的li,如果有,是否是当前的li,如果不是,将展开的li收起
  16. if( expandLi ){
  17. if( expandLi.parent().index()!==$(this).parent().index() ){
  18. // 判断当前list是左滑还是上下滑
  19. if( Math.abs(endY-initY) < Math.abs(endX-initX) ){
  20. e.preventDefault();
  21. }
  22. expandLi.css('-webkit-transform','translateX('+0+'px)');
  23. }
  24. }
  25. initX = e.targetTouches[0].pageX;
  26. initY = e.targetTouches[0].pageY;
  27. moveX = $(this).offset().left;
  28. $(this).on('touchmove',function(e){
  29. var curY = e.targetTouches[0].pageY;
  30. var curX = e.targetTouches[0].pageX;
  31. var X = curX - initX; // 不断获取移动的距离
  32. $(this).removeClass('animated');
  33. if( Math.abs(endY-initY)<Math.abs(endX-initX) ){
  34. e.preventDefault();
  35. if( moveX==0 ){
  36. if( X>0 ) {
  37. $(this).css('-webkit-transform','translateX('+0+'px)');
  38. }else if( X<0 ){
  39. if( X<-slideMaxWid ) X=-slideMaxWid;
  40. $(this).css('-webkit-transform','translateX('+X+'px)');
  41. }
  42. }
  43. // 已经处于最左
  44. else if( moveX < 0 ){
  45. onthel = true;
  46. if( X>0 ) { // 向右滑
  47. if( X-slideMaxWid>0 ){
  48. $(this).css('-webkit-transform','translateX('+0+'px)');
  49. }else{
  50. $(this).css('-webkit-transform','translateX('+(X-slideMaxWid)+'px)');
  51. }
  52. }else { // 左滑
  53. $(this).addClass('animated');
  54. $(this).css('-webkit-transform','translateX('+0+'px)');
  55. }
  56. }
  57. }else{
  58. isScroll = true;
  59. }
  60. })
  61. })
  62. listItem.on('touchend',function(e){
  63. endX = e.changedTouches[0].pageX;
  64. endY = e.changedTouches[0].pageY;
  65. var X = endX - initX;
  66. $(this).addClass('animated');
  67. //Slide to right or the distance of slide to left less than 20;
  68. if( X>-20||onthel||isScroll ){
  69. $(this).css('-webkit-transform','translateX('+0+'px)');
  70. onthel = false;
  71. isScroll = false;
  72. }else{
  73. $(this).css('-webkit-transform','translateX('+(-slideMaxWid)+'px)');
  74. expandLi = $(this);
  75. }
  76. })
  77. })();
  78. })(Zepto);