微信小程序基于movable-view实现滑动删除效果

微信(小程序)  /  管理员 发布于 3年前   379

基于movable-view实现的一种较为完美的滑动删除效果

前言：用了很多去实现滑动删除的效果，都不太尽如人意，最后用小程序官方专用滑动组件来实现，但是这个组件有一点坑，咱们慢慢道来

1、wxml布局

                         {{'滑动删除' + item.id}}                    删除            

2、wxss（这里我用的less布局，布局很重要）

page {  background-color: #efefef;} .list {  padding: 30rpx 30rpx 0;  .row {    width: 100%;    overflow: hidden;    margin-bottom: 30rpx;    .list_item {      border-radius: 12rpx;      position: relative;      left: -120rpx;      width: calc(100% + 120rpx);      height: 160rpx;      .itmem_wrap {        width: calc(100% - 120rpx);        height: 100%;        display: flex;        align-items: center;        justify-content: center;        position: relative;        left: 120rpx;        z-index: 2;        background-color: #fff;      }      .delete_wrap {        position: absolute;        right: 0;        top: 0;        width: 50%;        height: 100%;        background-color: rgb(219, 54, 54);        display: flex;        justify-content: flex-end;        z-index: 1;        .delete_btn {          width: 120rpx;          height: 100%;          display: flex;          justify-content: center;          align-items: center;          color: #fff;        }      }    }  }}

3、JavaScript

const app = getApp()Page({  data: {    list: [{        id: 1      },      {        id: 2      },      {        id: 3      },      {        id: 4      },      {        id: 5      },      {        id: 6      },      {        id: 7      },      {        id: 8      },      {        id: 9      },      {        id: 10      }    ],    startX: '',    startY: ''  },  onLoad: function () {    this.setListX();  },  // 给每一项设置x值  setListX() {    this.data.list.map(item => {      item.x = 0;    })    this.setData({      list: this.data.list    })  },  // 开始滑动  touchMoveStartHandle(e) {   // 我们要记录滑动开始的坐标点，后面计算要用到    if (e.touches.length == 1) {      this.setData({        startX: e.touches[0].clientX,        startY: e.touches[0].clientY      });    }  },  // 滑动事件处理,一次只能滑出一个删除按钮 为了防止滑动出现抖动，我们用滑动结束事件  touchMoveEndHandle: function (e) {    var currentIndex = e.currentTarget.dataset.index, //当前索引      startX = this.data.startX, //开始X坐标      startY = this.data.startY, //开始Y坐标      touchMoveEndX = e.changedTouches[0].clientX, //滑动变化X坐标      touchMoveEndY = e.changedTouches[0].clientY, //滑动变化Y坐标      //获取滑动角度      angle = this.angle({        X: startX,        Y: startY      }, {        X: touchMoveEndX,        Y: touchMoveEndY      });    //滑动超过50度角 return，防止上下滑动触发    if (Math.abs(angle) > 50) return;    this.data.list.map((item, index) => {      if (touchMoveEndX > startX) {        // 右滑        if (index == currentIndex) item.x = 0;      } else {        // 左滑        item.x = -120        if (index != currentIndex) item.x = 0;      }    })    this.setData({      list: this.data.list    })  },  /**   * 计算滑动角度   * start 起点坐标   * end 终点坐标   * Math.PI 表示一个圆的周长与直径的比例，约为 3.14159;PI就是圆周率π，PI是弧度制的π,也就是180°   */  angle: function (start, end) {    var _X = end.X - start.X,      _Y = end.Y - start.Y    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);  }})

4、最终效果预览

总结

以上所述是小编给大家介绍的微信小程序基于movable-view实现滑动删除效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• 微信小程序实现左滑动删除效果
• 微信小程序实现滑动删除效果
• 微信小程序 实现列表项滑动显示删除按钮的功能
• 微信小程序 向左滑动删除功能的实现