微信小程序滑动删除效果

转自：看源社区 http://www.see-source.com/weixinwidget/detail.html?wid=80

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

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

item的布局：

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

        
        
          {{cardTeam.name}}
          
            -
            1
            +
          
          
            ¥
            99.80
          
        
        确定
        删除
      

主要是将删除按钮的设为绝对定位(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手指抬起时触发，用于设置弹回、摊开效果。目前我的是超过一半自动弹开，不足一半自动收回。