微信小程序如何实现滑动
这篇文章主要为大家展示了微信小程序如何实现滑动,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
目前创新互联已为上千的企业提供了网站建设、域名、雅安服务器托管、绵阳服务器托管、企业网站设计、红塔网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
前言
本文使用动画组件wx.createAnimation来实现滑动操作:
1. 左滑动显示操作项区域;
2. 点击操作项触发相应方法;
3. 右滑动和点击行收起操作项;
4. 点击“删除”并确定则删除该条数据。
最终效果如下:
实现过程
1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析;
Tips:“详情”、“取号”和“删除”点击触发使用catchtap,阻止冒泡事件向上冒泡;
{{item.title}} 预约时间:{{item.date}} 状态: {{item.status}} 详情 取号 删除
.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用于删除该条数据。
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; // 解决切换到其它页面再返回该页面动画失效的问题 } })
以上就是关于微信小程序如何实现滑动的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
分享名称:微信小程序如何实现滑动
网站路径:http://pwwzsj.com/article/ijsjeg.html