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

基于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
    })
  },
  
  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实现滑动删除效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！