登录 | 注册
小程序交流 +关注 已有0人关注 +发表新主题

微信小程序列表项左滑删除效果

精华 发表在 2019-3-13 10:23 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 0 548

本帖最后由 bbkacs 于 2019-3-13 10:24 编辑

微信小程序列表项左滑删除效果

 微信小程序列表项左滑删除效果

先看效果

微信小程序列表项左滑删除效果

 微信小程序列表项左滑删除效果

微信小程序列表项左滑删除效果

 微信小程序列表项左滑删除效果

1      使用场景
应用页面以列表方式展示数据时,左滑单个数据项时,数据项左移,出现删除按钮,实现快捷删除数据的效果
2      实现思路
利用小程序组件自带的事件bindtouchstart和bindtouchend,记录滑动方向与距离,判断删除按钮展示与隐藏;
样式设置组件的位置偏移,以实现跟随手指滑动的效果

3      代码示例
代码出来的效果比示例图会简化

3.1  WXML
<view class='box'>
<block wx:for="{{list}}" wx:for-item="v" wx:for-index="i" wx:key="k">
  <view class='item' style="left:{{v.id== touchId?'-50':'0'}}px;" bindtouchstart='touchStart' bindtouchend='touchEnd' data-obj="{{v}}" >
    <view class='text'>{{v.text}}</view>
    <view class='del-btn'><text>删除</text></view>
  </view>
</block>
</view>


3.2  WXSS
/*pages/test/touch.wxss */
page{background-color: rgb(235, 235, 235);}

.box{
  width: 100%;
  height: auto;
  background-color: #fff;
}

.item{
  display: flex;
  width: 100%;
  border-bottom:1px solid #999;
  font-size: 14px;
  position:relative;
}

.text{
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding-left: 30px;
}

.del-btn{
  position: absolute;
  right: -50px;
  width: 50px;
  line-height: 30px;
  height: 30px;
  text-align: center;
  background-color: #FF3B30;
  color: #fff;
}

3.3  JS
//pages/test/touch.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var list = [{ text: '第一条', id: 1 }, { text: '第二条', id: 2}];
    this.setData({
      list:list
    });
  },
  /**
   *  滑动开始
   */
  touchStart:function(e){
    var changedTouches =e.changedTouches;
    var obj =e.currentTarget.dataset.obj;
    if (changedTouches.length > 0) {
      var changes = changedTouches[0];
      var x =changes.clientX;
      // 记录滑动距离和滑动对应的数据
      this.setData({touchInfo: { x: x, obj: obj } });
    }
  },
  /**
   *  滑动结束
   */
  touchEnd: function (e) {
    var changedTouches =e.changedTouches;
if(changedTouches.length > 0) {
// 取出滑动开始记录的数据
      var touchInfo = this.data.touchInfo;
      var sX = touchInfo.x;
      var obj =touchInfo.obj;
      // 滑动结束数据
      var changes =changedTouches[0];
      var eX =changes.clientX;
      var flag = 50; // 滑动触发距离
      var distance = Math.abs(eX - sX); // 距离
      // 超过触发距离
      if (distance >= flag) {
        if (eX > sX) {
          // 结束距离大于开始距离,则向右滑,隐藏删除按钮
          this.setData({
            touchId: ''
          });
        } else if (eX < sX) {
          // 结束距离小于开始距离,则向左滑
          this.setData({
            touchId: obj.id
          });
        } else {
          //console.log('没动');
        }
      }
    }
  },
})



扫描二维码,手机查看本帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴