Fork me on GitHub

[小程序]-列表滑动删除

Posted on

列表滑动删除
notes.splice(id,i)就可以从index为id的位置开始删除i个元素

image

wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<scroll-view hidden="{{items.length==0}}" class='userInfoView' scroll-y="true">
      <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="index">
        <view class="content">
          <image class='userCheckIcon' src="{{item.checkIcon}}"></image>
          <view class="userinfonName">{{item.name}}<span class="userinfoType">{{item.userType}}</span></view>
          <!-- <view class='userinfoType'>{{item.userType}}</view> -->
          <view class='userinfoCord'>身份证</view>
          <view class='userinfoncordNer'>{{item.userCord}}</view>
          <view class='userinfoPhone'>手机号</view>
          <view class='userinfoPhoneNer'>{{item.phone}}</view>
          <image class='userinfonAdit' src="{{item.aditIcon}}"></image>
        </view>
        <view class="del" catchtap="del" data-index="{{index}}">删除</view>
      </view>
    </scroll-view>

wxss

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
.userInfoView{
  width: 100%;
  height: 592rpx;
  margin-top: 40rpx;
  padding-bottom: 20rpx;
}
.userInfoLi{
  width: 100%;
  height: 176rpx;
  background-color: #F8F9FC;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}
.userinfonName{
  position: absolute;
  left: 108rpx;
  top: 24rpx;
  font-size: 28rpx;
  color: #333333;
}
.userinfoType{
  margin-left: 20rpx;
  color: #999999;
  font-size: 24rpx;
}
.userinfoCord{
  position: absolute;
  left: 108rpx;
  top: 74rpx;
  font-size: 24rpx;
  color: #999999;
}
.userinfoncordNer{
  position: absolute;
  left: 212rpx;
  top: 74rpx;
  font-size: 24rpx;
  color: #999999;
}
.userinfoPhone{
  position: absolute;
  left: 108rpx;
  top: 118rpx;
  font-size: 24rpx;
  color: #999999;
}
.userinfoPhoneNer{
  position: absolute;
  left: 212rpx;
  top: 118rpx;
  font-size: 24rpx;
  color: #999999;
}
.userinfonAdit{
  position: absolute;
  left: 602rpx;
  top: 74rpx;
  width: 28rpx;
  height: 27rpx;
}
.touch-item {
  height: 176rpx;
  background-color: #F8F9FC;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden
}

.content {
  width: 100%;
  margin-right:0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  margin-left: -90px;
  position: relative;
}
.userCheckIcon{
  position: absolute;
  left: 40rpx;
  top: 74rpx;
  width: 28rpx;
  height: 28rpx;
}
.del {
  background-color: #F56141;
  width: 90rpx;
  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;
  font-size: 28rpx;
}

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

js

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
128
129
130
131
132
133
134
135
136
137
138
139
// pages/Travel/FillOrder/fillOrder.js

Page({
  data: {
    items: [],
    startX: 0, 
    startY: 0,
    mengbanBol:true
  },
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: "填写订单"
    })
    var that = this;
    for (var i = 0; i < 10; i++) {
      this.data.items.push({
        checkIcon: '../../image/checkTrue.png',
        name:"李俊涛",
        userType:"儿童",
        userCord:"3111 2589 8512 365 222",
        phone:"180 0011 1166",
        aditIcon: '../../image/aditIcon.png',
        isTouchMove: false //默认隐藏删除
      })
    }
    this.setData({
      items: this.data.items
    });
  },
  changMbbOL(e){
    this.setData({
      mengbanBol:false
    });
  },
  calselMbbOL(){
    this.setData({
      mengbanBol: true
    });
  },
  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

    })

  }
  
})
支持作者