最近一直在开发微信小程序，无奈得实现开发的各种要求, 这不, 收藏夹的列表页需要添加一个左滑删除操作的功能, 于是在网上查阅了各种资料, 借鉴了大神们的一些思路, 好歹也能实现功能了吧, 这里就稍微记录一下, 就当作是自己的东西了吧, 哈哈 ^_^

废话不多说, 先来看一下效果吧!!!

wxml 结构

  • touch-item元素绑定了bindtouchstart、bindtouchmove事件
1
2
3
4
5
6
7
8
9
10
11
12
<view wx:for="{{patents}}" wx:key="" class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" bindtouchstart="touchStart" bindtouchmove="touchMove" data-index="{{index}}">
  <view class="item" >
    <!-- ...其他代码 -->
    <view class="meta">
      <view class="title">{{ item.title }}</view>
      <view class="apply">申请号: {{ item.applicationNumber }}</view>
      <view class="apply">申请日: {{ item.applicationDate }}</view>
      <view class="apply">公开号: {{ item.publicNumber }}</view>
    </view>
  </view>
  <view class='del' catchtap="delItem" data-index="{{index}}">删除</view>
</view>

wxss 样式

  • flex布局、css3动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 核心样式 */
.touch-item .item {
width: 100%;
padding: 20rpx;
margin-right:0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(160rpx);
transform: translateX(160rpx);
margin-left: -160rpx
}

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

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

js 交互

  • touchstart 和 touchmove 事件的处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// 获取全局应用程序实例对象
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showTopBtn: false,
    total: 0,
    hasMore: true,
    page: 1,
    size: 20,
    patents: [],
    startX: 0, //开始坐标
    startY: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 手指触摸动作开始 记录起点X坐标
   */
  touchStart(e) {
    //开始触摸时 重置所有删除
    this.data.patents.forEach(function (v, i) {
      if (v.isTouchMove) //只操作为true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      patents: this.data.patents
    })
  },

  /**
   * 手指滑动事件处理
   */
  touchMove(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; // 滑动变化坐标
    var angle = that.getAngle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); // 获取滑动角度

    that.data.patents.forEach(function (v, i) {
      v.isTouchMove = false;
      if (Math.abs(angle) > 30) return;  //滑动超过30度角 return
      if (i == index && touchMoveX < startX) { // 左滑
        v.isTouchMove = true;
      } else { // 右滑
        v.isTouchMove = false;
      }
    })
    //更新数据
    that.setData({
      patents: that.data.patents
    })
  },

  /**
   * 删除事件
   */
  delItem(e) {
    var that = this;
    //获取列表中要删除项的下标
    var index = e.currentTarget.dataset.index;
    this.data.patents[index].isTouchMove = true;
    //更新数据
    this.setData({
      patents: that.data.patents
    })

    wx.showModal({
      title: '提示',
      content: '确认是否删除？',
      success: function (res) {
        if (res.confirm) {
          var list = that.data.patents;
          //移除列表中下标为index的项
          list.splice(index, 1);
          //更新列表的状态和缓存
          that.setData({
            patents: list,
            total: list.length
          });
          wx.setStorageSync('FAVORITE', list)
          // 重新写入用户文件
          app.wechat.writeFile('favorite.json', list)

          wx.showToast({
            title: '删除成功',
            duration: 1500
          })
        } else {
          // 取消则复原
          that.data.patents[index].isTouchMove = false;
          //更新数据
          that.setData({
            patents: that.data.patents
          })
        }
      }
    })
  },

  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  getAngle(start, end) {
    var _X = end.X - start.X;
    var _Y = end.Y - start.Y;
    // 返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  }
})