美文网首页
小程序左滑右滑删除

小程序左滑右滑删除

作者: Stonesy | 来源:发表于2021-01-09 20:19 被阅读0次
<view class='myOrder' style="overflow: hidden;">
        <view bindtouchstart="touchstart" bindtouchmove="touchmove" data-url='/pages/jf/jf?cp={{cpArray[index]}}' bindtap='jf' class='title acea-row row-between-wrapper' data-index="{{index}}" wx:if="{{cpArray.length>0}}" wx:for="{{cpArray}}" wx:key='index' style="transition:all .5s;position: relative;transform: {{index==del?'translateX(-20%)':'translateX(0%)'}};">
           <view>{{cpArray[index]}}</view>
           <view class='allOrder'><text class='iconfont icon-jiantou'></text></view>
           <view style="position: absolute;right: -20%;background: #F44839;color: white;width:20%;text-align: center;padding: 41rpx 0;">删除</view>
        </view>
      </view> 
//手指触摸动作开始 记录起点X坐标


data:{
recordList: [],
    startX: 0, //开始坐标
    startY: 0,
}

  touchstart: function (e) {
    //开始触摸时 重置所有删除
    this.data.recordList.forEach(function (v, i) {
      if (v.isTouchMove) //只操作为true的
        v.isTouchMove = false;
    })

    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      recordList: this.data.recordList
    })
  },
  //滑动事件处理
  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
      });
    var randl = false;
    if (Math.abs(angle) > 30) return;
    // if (i == index) {
    if (touchMoveX > startX) //右滑
      randl = false
    else //左滑
      randl = true
    // }
    if (!randl) {
      //更新数据
      index = 4;
    }
    console.log(randl);
    console.log(index);
    that.setData({
      del: index
      // recordList: that.data.recordList
    })
  },
  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  //删除事件
  del: function (e) {
    
  }

相关文章

网友评论

      本文标题:小程序左滑右滑删除

      本文链接:https://www.haomeiwen.com/subject/fmchaktx.html