小程序中左(右)滑动删除Demo

小程序笔记 侧滑删除

前台代码 wxml

<view style='display: flex;'>

    <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">

        <view class="content">{{item.content}}</view>

        <view class="del" catchtap="del" data-index="{{index}}">删除</view>

    </view>

</view>

样式 CSS

.content {
  margin-right: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(180rpx);
  transform: translateX(180rpx);
  margin-left: -180rpx;
}

.del {
  background-color: orangered;
  width: 180rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  -webkit-transform: translateX(180rpx);
  transform: translateX(180rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.touch-move-active .content, .touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

js处理

Page({

    data: {

        items: [],

        startX: 0, //开始坐标

        startY: 0

    },

    onLoad: function (e) {

        for (var i = 0; i < 10; i++) {

            this.data.items.push({

                content: i + " 看看左滑会出现什么,看看左滑会出现什么,看看左滑会出现什么,看看左滑会出现什么,看看左滑会出现什么",

            isTouchMove: false //默认隐藏删除

            })

        }

    this.setData({

        items: this.data.items

    });

},

//手指触摸动作开始 记录起点X坐标

touchstart: function (e) {

//开始触摸时 重置所有删除

    this.data.items.forEach(function (v, i) {

        if (v.isTouchMove)//只操作为true的

            v.isTouchMove = false;

    })

    this.setData({

        startX: e.changedTouches[0].clientX,

        startY: e.changedTouches[0].clientY,

        items: this.data.items

    })

},

//滑动事件处理

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.items.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({

        items: that.data.items

    })

},

/**

* 计算滑动角度

* @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) {

    this.data.items.splice(e.currentTarget.dataset.index, 1)

    this.setData({

        items: this.data.items

    })

}

})