欢迎光临,了解微信小程序开发,就上易用通!

小程序 侧滑删除(左滑删除)

发布:2018-01-25 09:53浏览: 来源:网络 作者:tianshu

小程序 侧滑删除(左滑删除)(图1) 

如图所示,demo是小程序的侧滑删除,这个是我在别人写的例子的基础上修改的。代码如下

js文件代码:

  1. // pages/leftSwiperDel/index.js  
  2.   
  3. var initdata = function (that) {  
  4.   var list = that.data.list  
  5.   for (var i = 0; i < list.length; i++) {  
  6.     list[i].txtStyle = ""  
  7.   }  
  8.   that.setData({ list: list })  
  9. }  
  10.   
  11. Page({  
  12.   data: {  
  13.     delBtnWidth: 180,//删除按钮宽度单位(rpx)  
  14.     list: [  
  15.       {  
  16.         txtStyle: "",  
  17.         icon: "/images/qcm.png",  
  18.         txt: "指尖快递"  
  19.       },  
  20.       {  
  21.         txtStyle: "",  
  22.         icon: "/images/qcm.png",  
  23.         txt: "指尖快递"  
  24.       },  
  25.       {  
  26.         txtStyle: "",  
  27.         icon: "/images/qcm.png",  
  28.         txt: "指尖快递"  
  29.       },  
  30.       {  
  31.         txtStyle: "",  
  32.         icon: "/images/qcm.png",  
  33.         txt: "指尖快递"  
  34.       },  
  35.       {  
  36.         txtStyle: "",  
  37.         icon: "/images/qcm.png",  
  38.         txt: "指尖快递"  
  39.       },  
  40.       {  
  41.         txtStyle: "",  
  42.         icon: "/images/qcm.png",  
  43.         txt: "指尖快递"  
  44.       },  
  45.       {  
  46.         txtStyle: "",  
  47.         icon: "/images/qcm.png",  
  48.         txt: "指尖快递"  
  49.       },  
  50.       {  
  51.         txtStyle: "",  
  52.         icon: "/images/qcm.png",  
  53.         txt: "指尖快递"  
  54.       },  
  55.       {  
  56.         txtStyle: "",  
  57.         icon: "/images/qcm.png",  
  58.         txt: "指尖快递"  
  59.       },  
  60.       {  
  61.         txtStyle: "",  
  62.         icon: "/images/qcm.png",  
  63.         txt: "指尖快递"  
  64.       },  
  65.       {  
  66.         txtStyle: "",  
  67.         icon: "/images/qcm.png",  
  68.         txt: "指尖快递"  
  69.       },  
  70.   
  71.     ]  
  72.   },  
  73.   onLoad: function (options) {  
  74.     // 页面初始化 options为页面跳转所带来的参数  
  75.     this.initEleWidth();  
  76.   },  
  77.   onReady: function () {  
  78.     // 页面渲染完成  
  79.   },  
  80.   onShow: function () {  
  81.     // 页面显示  
  82.   },  
  83.   onHide: function () {  
  84.     // 页面隐藏  
  85.   },  
  86.   onUnload: function () {  
  87.     // 页面关闭  
  88.   },  
  89.   touchS: function (e) {  
  90.     if (e.touches.length == 1) {  
  91.       this.setData({  
  92.         //设置触摸起始点水平方向位置  
  93.         startX: e.touches[0].clientX  
  94.       });  
  95.     }  
  96.   },  
  97.   touchM: function (e) {  
  98.     var that = this  
  99.     initdata(that)  
  100.     if (e.touches.length == 1) {  
  101.       //手指移动时水平方向位置  
  102.       var moveX = e.touches[0].clientX;  
  103.       //手指起始点位置与移动期间的差值  
  104.       var disX = this.data.startX - moveX;  
  105.       var delBtnWidth = this.data.delBtnWidth;  
  106.       var txtStyle = "";  
  107.       if (disX == 0 || disX < 0) {//如果移动距离小于等于0,文本层位置不变  
  108.         txtStyle = "left:0px";  
  109.       } else if (disX > 0) {//移动距离大于0,文本层left值等于手指移动距离  
  110.         txtStyle = "left:-" + disX + "px";  
  111.         if (disX >= delBtnWidth) {  
  112.           //控制手指移动距离最大值为删除按钮的宽度  
  113.           txtStyle = "left:-" + delBtnWidth + "px";  
  114.         }  
  115.       }  
  116.       //获取手指触摸的是哪一项  
  117.       var index = e.target.dataset.index;  
  118.       var list = this.data.list;  
  119.       list[index].txtStyle = txtStyle;  
  120.       //更新列表的状态  
  121.       this.setData({  
  122.         list: list  
  123.       });  
  124.     }  
  125.   },  
  126.   
  127.   touchE: function (e) {  
  128.     if (e.changedTouches.length == 1) {  
  129.       //手指移动结束后水平位置  
  130.       var endX = e.changedTouches[0].clientX;  
  131.       //触摸开始与结束,手指移动的距离  
  132.       var disX = this.data.startX - endX;  
  133.       var delBtnWidth = this.data.delBtnWidth;  
  134.       //如果距离小于删除按钮的1/2,不显示删除按钮  
  135.       var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";  
  136.       //获取手指触摸的是哪一项  
  137.       var index = e.target.dataset.index;  
  138.       var list = this.data.list;  
  139.       list[index].txtStyle = txtStyle;  
  140.       //更新列表的状态  
  141.       this.setData({  
  142.         list: list  
  143.       });  
  144.     }  
  145.   },  
  146.   //获取元素自适应后的实际宽度  
  147.   getEleWidth: function (w) {  
  148.     var real = 0;  
  149.     try {  
  150.       var res = wx.getSystemInfoSync().windowWidth;  
  151.       var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应  
  152.       // console.log(scale);  
  153.       real = Math.floor(res / scale);  
  154.       return real;  
  155.     } catch (e) {  
  156.       return false;  
  157.       // Do something when catch error  
  158.     }  
  159.   },  
  160.   initEleWidth: function () {  
  161.     var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);  
  162.     this.setData({  
  163.       delBtnWidth: delBtnWidth  
  164.     });  
  165.   },  
  166.   //点击删除按钮事件  
  167.   delItem: function (e) {  
  168.     var that = this  
  169.     wx.showModal({  
  170.       title: '提示',  
  171.       content: '是否删除?',  
  172.       success: function (res) {  
  173.         if (res.confirm) {  
  174.           //获取列表中要删除项的下标  
  175.           var index = e.target.dataset.index;  
  176.           var list = that.data.list;  
  177.           //移除列表中下标为index的项  
  178.           list.splice(index, 1);  
  179.           //更新列表的状态  
  180.           that.setData({  
  181.             list: list  
  182.           });  
  183.         } else {  
  184.           initdata(that)  
  185.         }  
  186.       }  
  187.     })  
  188.   
  189.   }  
  190.   
  191. })  

wxss文件代码:

  1. /* pages/leftSwiperDel/index.wxss */  
  2. view{  
  3.     box-sizing: border-box;  
  4. }  
  5. .item-box{  
  6.     width: 700rpx;  
  7.     margin: 0 auto;  
  8.     padding:40rpx 0;  
  9. }  
  10. .items{  
  11.     width: 100%;  
  12. }  
  13. .item{  
  14.     position: relative;  
  15.     border-top: 2rpx solid #eee;  
  16.     height: 120rpx;  
  17.     line-height: 120rpx;  
  18.     overflow: hidden;  
  19. }  
  20. .item:last-child{  
  21.     border-bottom: 2rpx solid #eee;  
  22. }  
  23. .inner{  
  24.     position: absolute;  
  25.     top:0;  
  26. }  
  27. .inner.txt{  
  28.     background-color: #fff;  
  29.     width: 100%;  
  30.     z-index: 5;  
  31.     padding:0 10rpx;  
  32.     transition: left 0.2s ease-in-out;  
  33.     white-space:nowrap;  
  34.     overflow:hidden;  
  35.     text-overflow:ellipsis;  
  36. }  
  37. .inner.del{  
  38.     background-color: #e64340;  
  39.     width: 180rpx;text-align: center;  
  40.     z-index: 4;  
  41.     right: 0;  
  42.     color: #fff  
  43. }  
  44. .item-icon{  
  45.     width: 64rpx;  
  46.     vertical-align: middle;  
  47.     margin-right: 16rpx  
  48. }  
  49. .thumb{  
  50.     width: 200px;  
  51.     height: 200px;  
  52.     -webkit-overflow-scrolling: touch;  
  53.     overflow: scroll;  
  54. }  

wxml文件代码:

  1. <view class="item-box">  
  2.   <view class="items">  
  3.     <view wx:for="{{list}}"  wx:key="{{index}}"  class="item">  
  4.       <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.txtStyle}}" class="inner txt">  
  5.       <image class="item-icon" mode="widthFix" src="{{item.icon}}"></image>{{index}}{{item.txt}}</view>  
  6.       <view data-index="{{index}}" bindtap = "delItem" class="inner del">删除</view>  
  7.     </view>  
  8.   </view>  
  9. </view>  





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。