我们开发中,总会遇到一些删除功能列表的操作,在小程序中,触屏左滑操作,即显示可操作删除按钮,下面就是我写的一个demo,供前端开发人员参考:

示例:

WXML:

<view class="container">  <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{itemlist}}" wx:key="">    <view class="content">{{item.content}}</view>    <view class="del" catchtap="del" data-index="{{index}}">删除</view>  </view></view>

wxss:

page{  background: #ccc;}.container{  width:100%;  overflow: hidden;  box-sizing: border-box;  padding-bottom:10rpx;}.touch-item { font-size: 14px; display: flex; /* //均匀排布每个元素 */ background: #fff; justify-content: space-between; border-bottom:1px solid rgb(243, 177, 177); width: 100%; overflow: hidden; margin-top:16rpx;}.content { width: 100%; padding: 10px; line-height: 22px; margin-right:0; -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transform: translateX(90px); transform: translateX(90px); margin-left: -90px;}.del { background-color: #c00; width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; -webkit-transform: translateX(90px); transform: translateX(90px); -webkit-transition: all 0.4s; transition: all 0.4s;}/* .touch-move-active .content, */.touch-move-active .del { -webkit-transform: translateX(0); transform: translateX(0);}.touch-move-active .content{  background: rgba(180, 218, 12, 0.3);}

具体实现方法:JS

Page({  data: {    itemlist: [      {        content: '测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动',      },      {        content: '测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动',      },      {        content: '测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动',      },      {        content: '测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动',      },      {        content: '测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动,测试向左滑动',      },    ],    startX: 0, //开始坐标    startY: 0  },  //手指触摸动作开始 记录起点X坐标  touchstart: function (e) {    //开始触摸时 重置所有删除    this.data.itemlist.forEach(function (v, i) {      if (v.isTouchMove)//只操作为true的        v.isTouchMove = false;    })    this.setData({      startX: e.changedTouches[0].clientX,      startY: e.changedTouches[0].clientY,      itemlist: this.data.itemlist    })  },  //滑动事件处理  touchmove: function (e) {    var that = this,      index = e.currentTarget.dataset.index,//当前索引      startX = that.data.startX,//开始X坐标      startY = that.data.startY,//开始Y坐标      touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标      touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标      //获取滑动角度      angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });    that.data.itemlist.forEach(function (v, i) {      v.isTouchMove = false      //滑动超过30度角 return      if (Math.abs(angle) > 30) return;      if (i == index) {        if (touchMoveX > startX) //右滑          v.isTouchMove = false        else //左滑          v.isTouchMove = true      }    })    //更新数据    that.setData({      itemlist: that.data.itemlist    })  },  /**   * 计算滑动角度   * @param {Object} start 起点坐标   * @param {Object} end 终点坐标   */  angle: function (start, end) {    var dX = end.X - start.X,      dY = end.Y - start.Y    //返回角度 /Math.atan()返回数字的反正切值    return 360 * Math.atan(dY / dX) / (2 * Math.PI);  },  //删除事件  del: function (e) {    this.data.itemlist.splice(e.currentTarget.dataset.index, 1)    this.setData({      itemlist: this.data.itemlist    })  }})

完成

具体样式可根据需要进行调试,文章只为做个笔记,记录demo,同时分享给需要的童鞋们参考