1.wxml

!--向左滑动删除功能--viewclass="item-box"viewclass="items"viewwx:for="{{list}}"wx:key="{{index}}"class="item"viewbindtouchstart="touchS"bindtouchmove="touchM"bindtouchend="touchE"data-index="{{index}}"style="{{item.txtStyle}}"class="innertxt"i{{item.rank}}/iimageclass="item-icon"mode="widthFix"src="{{item.icon}}"/imagei{{item.name}}/ispanclass="item-data"iclass="rankpace"{{item.pace}}/i!--spanclass="rankxin"{{item.xin}}/span--/span/viewviewdata-index="{{index}}"bindtap="delItem"class="innerdel"删除/view/view/view/view

2.wxss

/*pages/leftSwiperDel/index.wxss*/view{box-sizing:border-box;}.item-box{width:700rpx;margin:0auto;padding:40rpx0;}.items{width:100%;}.item{position:relative;border-top:2rpxsolid#eee;height:120rpx;line-height:120rpx;overflow:hidden;}.item:last-child{border-bottom:2rpxsolid#eee;}.inner{position:absolute;top:0;}.inner.txt{background-color:#fff;width:100%;z-index:5;padding:010rpx;transition:left0.2sease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.inner.del{background-color:#e64340;width:180rpx;text-align:center;z-index:4;right:0;color:#fff}.item-icon{width:64rpx;height:64rpx;vertical-align:middle;margin-right:16rpx;margin-left:13px;border-radius:50%;}.item-data{float:right;margin-right:5%;}.rankpace{color:#fa7e04;}

3.js

//pages/leftSwiperDel/index.jsPage({data:{delBtnWidth:180//删除按钮宽度单位（rpx）},onLoad:function(options){//页面初始化options为页面跳转所带来的参数this.initEleWidth();this.tempData();},onReady:function(){//页面渲染完成},onShow:function(){//页面显示},onHide:function(){//页面隐藏},onUnload:function(){//页面关闭},touchS:function(e){if(e.touches.length==1){this.setData({//设置触摸起始点水平方向位置startX:e.touches[0].clientX});}},touchM:function(e){if(e.touches.length==1){//手指移动时水平方向位置varmoveX=e.touches[0].clientX;//手指起始点位置与移动期间的差值vardisX=this.data.startX-moveX;vardelBtnWidth=this.data.delBtnWidth;vartxtStyle="";if(disX==0||disX0){//如果移动距离小于等于0，文本层位置不变txtStyle="left:0px";}elseif(disX0){//移动距离大于0，文本层left值等于手指移动距离txtStyle="left:-"+disX+"px";if(disX=delBtnWidth){//控制手指移动距离最大值为删除按钮的宽度txtStyle="left:-"+delBtnWidth+"px";}}//获取手指触摸的是哪一项varindex=e.target.dataset.index;varlist=this.data.list;list[index].txtStyle=txtStyle;//更新列表的状态this.setData({list:list});}},touchE:function(e){if(e.changedTouches.length==1){//手指移动结束后水平位置varendX=e.changedTouches[0].clientX;//触摸开始与结束，手指移动的距离vardisX=this.data.startX-endX;vardelBtnWidth=this.data.delBtnWidth;//如果距离小于删除按钮的1/2，不显示删除按钮vartxtStyle=disXdelBtnWidth/2?"left:-"+delBtnWidth+"px":"left:0px";//获取手指触摸的是哪一项varindex=e.target.dataset.index;varlist=this.data.list;list[index].txtStyle=txtStyle;//更新列表的状态this.setData({list:list});}},//获取元素自适应后的实际宽度getEleWidth:function(w){varreal=0;try{varres=wx.getSystemInfoSync().windowWidth;varscale=(750/2)/(w/2);//以宽度750px设计稿做宽度的自适应//console.log(scale);real=Math.floor(res/scale);returnreal;}catch(e){returnfalse;//Dosomethingwhencatcherror}},initEleWidth:function(){vardelBtnWidth=this.getEleWidth(this.data.delBtnWidth);this.setData({delBtnWidth:delBtnWidth});},//点击删除按钮事件delItem:function(e){//获取列表中要删除项的下标varindex=e.target.dataset.index;varlist=this.data.list;//移除列表中下标为index的项list.splice(index,1);//更新列表的状态this.setData({list:list});},//测试临时数据tempData:function(){varlist=[{rank:"1",txtStyle:"",icon:"/images/my.png",name:"李飞",pace:"23456",},{rank:"2",txtStyle:"",icon:"/images/my.png",name:"张叶",pace:"23450",},{rank:"3",txtStyle:"",icon:"/images/my.png",name:"王小婷",pace:"22345",},{rank:"4",txtStyle:"",icon:"/images/my.png",name:"袁经理",pace:"21687",},{rank:"5",txtStyle:"",icon:"/images/my.png",name:"陈雅婷",pace:"21680",},{rank:"6",txtStyle:"",icon:"/images/my.png",name:"许安琪",pace:"20890",},{rank:"7",txtStyle:"",icon:"/images/my.png",name:"里俊飞",pace:"20741",},{rank:"8",txtStyle:"",icon:"/images/my.png",name:"李小俊",pace:"19511",},{rank:"9",txtStyle:"",icon:"/images/my.png",name:"陈俊飞",pace:"19501",},]//this.setData({list:list});}})