微信小程序实现滑动删除效果

最初打算使用scroll-view实现，效果好、流畅、有惯性滑动，但由于滚动条没法去掉、无法实现上下层的帧布局，最终放弃了。

还是自己写个吧，利用手势事件。遗憾的是小程序中目前没有像android中快速滑动事件，所以，要实现惯性滑动是不可能了。

item的布局：

推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。

<view wx:for="{{cardteams}}" wx:for-item="cardteam" id="{{cardteam.id}}" class="item" bindtouchstart="drawstart" bindtouchmove="drawmove" bindtouchend="drawend" style="right:{{cardteam.right}}px"> 
    <image class="img" src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" mode="scaletofill"></image> 
    <view class="number-wrapper"> 
     <text class="name">{{cardteam.name}}</text> 
     <view class="count-wrapper"> 
      <view class="decrease-btn">-</view> 
      <text class="count">1</text> 
      <view class="increase-btn">+</view> 
     </view> 
     <view class="price-wrapper"> 
      <text class="unit">¥</text> 
      <text class="price">99.80</text> 
     </view> 
    </view> 
    <view class="ok"><view class="inner-ok">确定</view></view> 
    <view class="remove" data-id="{{cardteam.id}}" bindtap="delitem"><view>删除</view></view> 
   </view> 

主要是将删除按钮的设为绝对定位(position: absolute)：

.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":"http://www.see-source.com", "right":0, "startright":0},{"id":"bbbb", "name":"小程序教程", "url":"http://www.see-source.com", "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手指抬起时触发，用于设置弹回、摊开效果。目前我的是超过一半自动弹开，不足一半自动收回。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。