1. 名称:
    huadong_del
  2. 作者:
    站长老左
  3. 来源:
  4. 浏览:
    23861
  5. 下载:
    5544
  6. 最新更新:
    2016-12-26
  7. 收藏3

最初打算使用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>
    </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;
}


js:

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手指抬起时触发,用于设置弹回、摊开效果。目前我的是超过一半自动弹开,不足一半自动收回。

共0 条评论
  1. 加载评论

评论内容:

发表评论
  1. 全部组件分类
  2. 瀑布流
  3. 示例
  4. 提示组件(ToolTip)
  5. 下拉刷新、上拉加载
  6. Toast
  7. 选项卡(tab)
  8. 图表
  9. 卡片切换
  10. 菜单
  11. 筛选
  12. 星级评分
  13. 选择器
  14. 滑动删除
  15. 手势密码
  16. Switch
  17. 搜索
  18. 游戏
  19. 弹幕
  20. 懒加载
  21. 布局
  22. 应用模仿
  23. Emoji
  24. 转盘抽奖
  25. 插件
  26. UI库
  27. 动画
  28. 下拉列表
  29. SnackBar
  30. HTML解析
  31. 日历
  32. 点餐小程序
  33. 购物效果
  34. 框架
  35. 渲染引擎
  36. 商城
  37. 吸顶停留
  38. 会议
  39. 分享
  40. 其他
最新评论