欢迎访问优讯网!
您当前的位置:首页 > 爱编程

微信小程序实现滑动操作代码

时间:2020-04-24 08:35:35  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要介绍了微信小程序实现滑动操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

前言

本文使用动画组件wx.createAnimation来实现滑动操作:

1. 左滑动显示操作项区域;

2. 点击操作项触发相应方法;

3. 右滑动和点击行收起操作项;

4. 点击“删除”并确定则删除该条数据。

最终效果如下:

实现过程

1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析;

Tips:“详情”、“取号”和“删除”点击触发使用catchtap,阻止冒泡事件向上冒泡;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<view class="wrapper">
 <view class="container">
  <view class="list">
   <view class="line" bindtouchstart="touchstartX" bindtap="resetX" bindtouchmove=
"touchmoveX" bindtouchend="touchendX" animation="{{currentIndex === index ?animation :
''}}"
data-index="{{index}}" wx:for="{{recordList}}" wx:key="id">
    <image class="icon-title" src="../../images/start_icon.png"></image>
    <view class="mes">
     <view class="title">{{item.title}}</view>
     <view class="date">预约时间:{{item.date}}</view>
     <view class="status">状态:<text>{{item.status}}</text></view>
    </view>
    <view class="operation">
     <view class="detail" catchtap="openDetail">详情</view>
     <view class="number" catchtap="getNumber">取号</view>
     <view class="delete" catchtap="deleteItem">删除</view>
    </view>
   </view>
  </view>
 </view>
</view>
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
.container .line {
 display: flex;
 padding: 20rpx 30rpx;
 border-bottom: 2rpx solid #ebebeb;
 position: relative;
 cursor: pointer;
}
  
.container .line .icon-title {
 margin-top: 28rpx;
 width: 30rpx;
 height: 30rpx;
}
  
.container .line .mes {
 flex: 1;
 margin-left: 10rpx;
}
  
.container .line .mes .date, .container .line .mes .status {
 color: #9d9d9d;
 font-size: 24rpx;
 margin-top: 4rpx;
}
  
.status text {
 color: #fba500;
}
  
.operation {
 position: absolute;
 top: 0;
 right: -300rpx;
 height: 152rpx;
 text-align: center;
 color: #fff;
 line-height: 152rpx;
 display: flex;
}
  
.operation view {
 width: 100rpx;
}
  
.operation .detail {
 background-color: #018efb;
}
  
.operation .number {
 background-color: #fba500;
}
  
.operation .delete {
 background-color: #cfcfcf;
}

2. 文件index.js存放所有功能的逻辑代码,下面主要分析几个重点方法:

1)方法touchmoveX用于手指触摸后移动时获取移动距离,并根据移动距离动画显示操作项相应区域,使移动有即时效果;

2)方法touchendX用于手指触摸动作结束时,如果移动距离达到100,则动画显示全部操作项区域;如果移动距离未达到100,则收起操作项区域;

3)方法deleteItem用于删除该条数据。

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
let movedistance = 0;
Page({
 data: {
  currentIndex: 0, // 列表操作项的index
  recordList: [{ // 列表数据
   id: 1,
   title: '业务办理01',
   date: '2020-04-21 10:30-12:00',
   status: '未取号'
  }, {
   id: 2,
   title: '业务办理02',
   date: '2020-04-21 10:30-12:00',
   status: '未取号'
  }, {
   id: 3,
   title: '业务办理03',
   date: '2020-04-21 10:30-12:00',
   status: '取号'
  }]
 },
 // 打开详情页
 openDetail() {
  console.log(this.data.currentIndex, '点击详情');
 },
 // 取号
 getNumber() {
  console.log(this.data.currentIndex, '点击取号');
 },
 // 删除数据
 deleteItem() {
  let that = this;
  let recordList = this.data.recordList;
  wx.showModal({
   title: '提示',
   content: '是否删除该条数据?',
   success(res) {
    if (res.confirm) {
     that.slideAnimation(0, 500);
     recordList.splice(that.data.currentIndex, 1);
     that.setData({
      recordList: recordList
     });
    } else if (res.cancel) {
     console.log('用户点击取消')
    }
   }
  });
 },
 // 手指触摸动作开始
 touchstartX(e) {
  this.setData({
   currentIndex: e.currentTarget.dataset.index
  });
  // 获取触摸X坐标
  this.recordX = e.touches[0].clientX;
 },
 // 点击操作
 resetX() {
  this.slideAnimation(0, 500);
 },
 // 手指触摸后移动
 touchmoveX(e) {
  let currentX = e.touches[0].clientX;
  movedistance = currentX - this.recordX; // 获取移动距离
  this.slideAnimation(movedistance, 500);
 },
 // 手指触摸动作结束
 touchendX() {
  let recordX;
  if (movedistance <= -100) { // 移动达到距离就动画显示全部操作项
   recordX = -300;
  } else if (movedistance >= -100) { // 移动未达到距离即还原
   recordX = 0;
  }
  this.slideAnimation(recordX, 500);
 },
 // 滑动动画
 slideAnimation(recordX, time) {
  let animation = wx.createAnimation({
   duration: time,
   timingFunction: 'ease'
  });
  animation.translate(recordX + 'rpx', 0).step()
  this.setData({
   animation: animation.export()
  })
 },
 onLoad: function(options) {
  wx.setNavigationBarTitle({
   title: '银行业务',
  });
  movedistance = 0; // 解决切换到其它页面再返回该页面动画失效的问题
 }
})

到此这篇关于微信小程序实现滑动操作代码的文章就介绍到这了

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/185322.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门