快活林资源网 Design By www.csstdc.com
前言
本文使用动画组件wx.createAnimation来实现滑动操作:
1. 左滑动显示操作项区域;
2. 点击操作项触发相应方法;
3. 右滑动和点击行收起操作项;
4. 点击“删除”并确定则删除该条数据。
最终效果如下:
实现过程
1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析;
Tips:“详情”、“取号”和“删除”点击触发使用catchtap,阻止冒泡事件向上冒泡;
<view class="wrapper"> <view class="container"> <view class="list"> <view class="line" bindtouchstart="touchstartX" bindtap="resetX" bindtouchmove="touchmoveX" bindtouchend="touchendX" animation="{{currentIndex === index " data-index="{{index}}" wx:for="{{recordList}}" wx:key="id"> <image class="icon-title" src="/UploadFiles/2021-04-02/start_icon.png">.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; // 解决切换到其它页面再返回该页面动画失效的问题 } })
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]