lemon_sideslip_list

功能描述

实用vue.js扩展的滑动删除插件，是基于vue.js 框架实现手势滑动删除功能

依赖的模块

  1. vue

快速使用

  1.     <script type="text/javascript">
  2.         (function(doc, win) {
  3.             var docEl = doc.documentElement,
  4.                 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  5.                 recalc = function() {
  6.                     var clientWidth = docEl.clientWidth;
  7.                     if(!clientWidth) return;
  8.                     docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
  9.                 };
  10.             if(!doc.addEventListener) return;
  11.             win.addEventListener(resizeEvt, recalc, false);
  12.             doc.addEventListener('DOMContentLoaded', recalc, false);
  13.         })(document, window);
  14.     </script>
  15.     <style>
  16.     html,body { margin:0px;}
  17.     .app-message-box { width:100%; height:auto; float:left; overflow: hidden}
  18.         .app-message-box ul { width:100%; height:auto; float:left;overflow: hidden; list-style:none; padding:0px 5%; margin-bottom:70px;}
  19.         .app-message-box ul li { width:100%; height:50px; float:left; border-bottom:1px solid #EFEFEF;}
  20.         .app-message-box ul li a {width:100%; height:50px; float:left; line-height: 50px; font-size:16px;}
  21.     /* 左侧滑块删除 */
  22.     .vue-list-del-data { -webkit-transition: all 0.2s;transition: 0.2s;position: relative;user-select: none;}
  23.         .vue-list-del-data[ data-type="0"] { transform: translateX(0px);}
  24.         .vue-list-del-data[ data-type="1"] { transform: translateX(-60px);}
  25.         .vue-list-del-data div.content { background: #fff;-webkit-box-sizing: border-box;box-sizing: border-box; justify-content: flex-end;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
  26.         .vue-list-del-data div.delete { width:100px;height: 50px;background: #DD4338; font-size: 15px;color: #fff;text-align: center;line-height:50px;position: absolute;top: 0;right: -90px;}
  28.     </style>
  29. <div class="app-message-box">
  30.     <ul id="message_list" style="margin:0px;">
  31.         <li v-cloak class="vue-list-del-data" v-for="(vo,index) in list" data-type="0">
  32.             <div class="content" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @touchmove.capture="touchMove" @click="skip(index)">
  33.                 <a>{{vo.title}}</a>
  34.             </div>
  35.             <div class="delete" @click="deleteItem" :data-index="index">删除</div>
  36.         </li>
  37.     </ul>
  38. </div>
  39. <script type="text/javascript" src="./libs/vue.js"></script>
  40. <script type="text/javascript">
  42. var message_list = new Vue({
  43.     el: '#message_list',
  44.     data: {
  45.         list: [{id:1,title:'测试1'},{id:2,title:'测试2'},{id:3,title:'测试3'},{id:4,title:'测试4'}],
  46.         startX:0,
  47.         startY:0,
  48.         endX:0,
  49.         endY:0,
  50.         moveX:0,
  51.         disX:0
  52.     },
  53.     methods:vue_methods_list_del('.vue-list-del-data',function(el,index){
  54.         alert('删除');
  55.     },function(el,index){
  56.         alert('点击');
  57.     })
  58. });
  60. function vue_methods_list_del(dom_str,click_callback,del_callback){
  61.     return {
  62.         skip:function(index) {
  63.             if(this.checkSlide()) {
  64.                 this.restSlide();
  65.             } else {
  66.                 //alert('----'+this.list[index].user_name);
  67.                 click_callback(this,index);
  68.             }
  69.         },
  70.         //滑动开始
  71.         touchStart:function(e) {
  72.             // 记录初始位置
  73.             this.startX = e.touches[0].clientX;
  74.             this.startY = e.touches[0].clientY;
  75.         },
  76.         //滑块中
  77.         touchMove:function(e){
  78.             var e = e || event;
  79.             var wd= 58;
  80.             var parentElement = e.currentTarget.parentElement;
  82.             var moveEndX = e.touches[0].clientX;
  83.             var moveEndY = e.touches[0].clientY;
  84.             var X = moveEndX - this.startX;
  85.             var Y = moveEndY - this.startY;
  87.             if(e.touches.length == 1) {
  88.                 this.moveX = e.touches[0].clientX
  89.                 this.disX = this.startX - this.moveX;
  91.                 //$lemon.toast('X:'+X +'||'+ 'Y:'+Y); 
  93.                 if(this.disX < 0 || this.disX == 0) {
  94.                     parentElement.style.transform = "translateX(0px)";
  95.                     // 大于0，表示左滑了，此时滑块开始滑动 
  96.                 }else if ( X < -90 && Y<90 && this.disX > 0) {
  97.                      //具体滑动距离我取的是 手指偏移距离*5。
  98.                     parentElement.style.transform = "translateX(-" + this.disX*5 + "px)";
  100.                     // 最大也只能等于删除按钮宽度 
  101.                     if (this.disX*5 >=wd) {
  102.                         this.restSlide();
  103.                         parentElement.style.transform = "translateX(-" +wd+ "px)";
  104.                         parentElement.dataset.type = 1;
  105.                     }
  106.                 }else{
  107.                     parentElement.style.transform = "translateX(0px)";
  108.                 }
  109.             }
  111.         },
  112.         //滑动结束
  113.         touchEnd:function(e) {
  114.             // 当前滑动的父级元素
  115.             var parentElement = e.currentTarget.parentElement;
  116.             // 记录结束位置
  117.             this.endX = e.changedTouches[0].clientX;
  119.             //$lemon.toast(parentElement.dataset.type);
  121.             var e = e || event;
  122.             var wd= 98;
  123.             if (e.changedTouches.length == 1 && parentElement.dataset.type==1) {
  124.                 var endX = e.changedTouches[0].clientX;
  125.                 this.disX = this.startX - endX;
  127.                 if ((this.disX*5) < (wd/2)) {
  128.                     this.restSlide();
  129.                     parentElement.style.transform = "translateX(0px)";
  130.                     parentElement.dataset.type = 0;
  131.                 }else{
  132.                     //大于一半 滑动到最大值
  133.                     this.restSlide();
  134.                     parentElement.style.transform = "translateX(-" +wd+ "px)";
  135.                     parentElement.dataset.type = 1;
  136.                 }
  137.             } 
  139.             this.startX = 0;
  140.             this.startY = 0;
  141.             this.endX = 0;
  142.             this.endY = 0;
  143.         },
  144.         //判断当前是否有滑块处于滑动状态
  145.         checkSlide:function() {
  146.             var listItems = document.querySelectorAll(dom_str);
  147.             for(var i = 0; i < listItems.length; i++) {
  148.                 if(listItems[i].dataset.type == 1) {
  149.                     return true;
  150.                 }
  151.             }
  152.             return false;
  153.         },
  154.         //复位滑动状态
  155.         restSlide:function() {
  156.             var listItems = document.querySelectorAll(dom_str);
  157.             // 复位
  158.             for(var i = 0; i < listItems.length; i++) {
  159.                 listItems[i].dataset.type = 0;
  160.                 listItems[i].style.transform = "translateX(0px)";
  161.             }
  162.         },
  163.         //删除
  164.         deleteItem:function(e) {
  165.             // 当前索引
  166.             var index = e.currentTarget.dataset.index;
  167.             del_callback(this,index);
  168.             // 复位
  169.             this.restSlide();
  170.             // 删除
  171.             this.list.splice(index, 1);
  172.         }
  173.     };
  174. };
  176. </script>

特别说明

  1. 使用本模块注意会与同vue.js模块冲突，请开发者谨慎选择，本模块为1.0版本，后续会陆续更新。``