还是自己写个吧,利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件,所以,要实现惯性滑动是不可能了。
item的布局:
推荐小程序优先使用flex布局,完全够用。这也是微信推荐的。
.item .remove{ width: 60px; height: 100%; background-color: red; position: absolute; top: 0; right: -60px; display: flex; justify-content: center; align-items: center; } Page({ data: { cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"", "right":0, "startRight":0}] }, drawStart : function(e){ // console.log("drawStart"); var touch = e.touches[0]; startX = touch.clientX; startY = touch.clientY; var cardTeams = this.data.cardTeams; for(var i in cardTeams){ var data = cardTeams[i]; data.startRight = data.right; } key = true; }, drawEnd : function(e){ console.log("drawEnd"); var cardTeams = this.data.cardTeams; for(var i in cardTeams){ var data = cardTeams[i]; if(data.right <= 100/2){="" data.right="0;" }else{="" data.right="maxRight;" }="" }="" this.setdata({="" cardteams:cardteams="" });="" },="" drawmove="" :="" function(e){="" console.log("drawmove");="" var="" self="this;" var="" dataid="e.currentTarget.id;" var="" cardteams="this.data.cardTeams;" if(key){="" var="" touch="e.touches[0];" endx="touch.clientX;" endy="touch.clientY;" console.log("startx="+startX+" endx="+endX ); if(endX - startX == 0) return ; var res = cardTeams; //从右往左 if((endX - startX) < 0){ for(var k in res){ var data = res[k]; if(res[k].id == dataId){ var startRight = res[k].startRight; var change = startX - endX; startRight += change; if(startRight > maxRight) startRight = maxRight; res[k].right = startRight; } } }else{//从左往右 for(var k in res){ var data = res[k]; if(res[k].id == dataId){ var startRight = res[k].startRight; var change = endX - startX; startRight -= change; if(startRight < 0) startRight = 0; res[k].right = startRight ; } } } self.setData({ cardTeams:cardTeams }); } }, //删除item delItem: function(e){ var dataId = e.target.dataset.id; console.log(" 删除"+dataid);="" var="" cardteams="this.data.cardTeams;" var="" newcardteams="[];" for(var="" i="" in="" cardteams){="" var="" item="cardTeams[i];" if(item.id="" !="dataId){" newcardteams.push(item);="" }="" }="" this.setdata({="" cardteams:newcardteams="" });="" },="" onload:="" function="" ()="" {="" console.log('onload:'+app.globaldata.domain)="" }="" })="" drawstart用于记录手指触碰时的位置,drawmove记录手指滑动的位置,两者的差值就是删除按钮的偏移量="" drawend手指抬起时触发,用于设置弹回、摊开效果。目前我的是超过一半自动弹开,不足一半自动收回。="">=>