论如何优雅的实现左滑删除（微信小程序）

效果展示

组件地址

组件已上传至码云，需要可自行下载码云地址

解析需求

WXML结构由一个大盒子包裹两个小盒子 分别为承载数据的展示盒子以及删除盒子
WXSS样式由大盒子负责整体定位居中给一个相对定位,两个子盒子用绝对定位相对于父盒子布局
JS需要给展示盒子绑定三个事件以达到监听所有的触摸滑动操作做出响应,分别为bindtouchstart，bindtouchmove，bindtouchend，通过滑动的x轴的像素点决定调用创建动画方法将盒子位移到目标位置（实现动画的方式由两种一种是用css3的动画，还有就是就是js创建动画，这里选用js的方式创建动画并绑定到dom中的方式实现的原因是css3对于动态数据进行动画方面不如js，如果用css3，那么将会大量的使用setDate刷新dom，在js上只需要重新创建动画即可，性能更佳，同时过渡顺滑）非常优雅~

开始撸代码

这个项目我封装成了一个组件 ,一方面是方便复用,二是抽离解耦内聚方便维护

这里使用一个block遍历 list 以index为key循环渲染卡片，item盒子作为父盒子包裹 box以及delete盒子作为结构，box盒子与item盒子等大，这样修改层级将可以让item盒子覆盖delete盒子

WXML代码部分

<block wx:for="{{list}}" wx:key="index"><view class="item"><view class="box" data-index="{{index}}" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend' animation="{{item.aniMation}}"><image class="img" mode="aspectFit" src="{{item.src}}"></image><view class="msgBox"><view class="name">{{item.name}}<text class="dutyName">-{{item.dutyName}}</text></view><view>{{item.phone}}</view></view></view><view class="delete" data-index="{{index}}" bindtap="delete">删除</view></view>
</block>

WXSS代码部分

page给个背景色让卡片由对比这里统一使用rpx布局 可以适应不同分辨率的设备,主要采用margin+子绝父相的形式布局,注意的是用z-index控制层级 box层级需要大于delete盒子

page {background-color: #F5F5F7;
}.box {width: 702rpx;height: 180rpx;display: flex;position: absolute;top: 0;left: 0;z-index: 2;align-items: center;padding: 0 24rpx;box-sizing: border-box;border-radius: 20rpx;background-color: #fff;border: 1rpx solid #fff;
}.delete {position: absolute;top: 0rpx;right: 0rpx;z-index: 1;width: 180rpx;height: 180rpx;border-radius: 0 20rpx 20rpx 0;background-color: #cd4525;color: #fff;text-align: center;line-height: 180rpx;
}.img {width: 120rpx;height: 120rpx;border-radius: 8rpx;margin-right: 20rpx;}.msgBox {display: flex;flex-direction: column;height: 120rpx;justify-content: center;color: #333333;font-size: 28rpx;
}.name {margin-bottom: 10rpx;
}.dutyName {font-size: 24rpx;color: #666666;
}.item {position: relative;width: 702rpx;height: 180rpx;margin: 0 auto 20rpx auto;display: flex;flex-direction: row;
}

JSON代码部分

开启微信的组件功能

{"component": true,"usingComponents": {}
}

JS代码部分

该组件接受一个list用于循环渲染卡片列表,当点击删除的时候会返回一个delete方法并将删除的数据传递回去供父页面做操作,同时监听了box盒子的三个事件（坐标是基于左上角为0 ，0 原点开始的）

bindtouchstart -> 触摸开始事件 在这个时候记录可能会滑动的卡片index值以及开始触摸点x轴的坐标
bindtouchmove -> 触摸滑动事件 当手指按住滑动的时候会触发这个事件返回最新的x轴坐标我们要将事件返回的x轴坐标存储起来同时我们判断滑动的值如果大于0那么我们让卡片做一个跟手的动画将值传递给创造动画的方法中，这里获取到的是px值所以传递createAnimationPX方法让box盒子向左滑动
touchend -> 触摸结束事件 当手指离开屏幕的时候会返回离开屏幕的时候最后的坐标根据坐标计算出移动的距离，通过移动的距离来判断是左移还是复位

// shipment/components/staffBox/staffBox.js
Component({/*** 组件的属性列表*/properties: {list: {type: Array,value: [{src: 'https://img2.baidu.com/it/u=2783448435,3957437405&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name: '老张',dutyName: '调度',phone: '13197372226',id: 1},{src: 'https://img2.baidu.com/it/u=2783448435,3957437405&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name: '老王',dutyName: '调度',phone: '13197372226',id: 2},{src: 'https://img2.baidu.com/it/u=2783448435,3957437405&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name: '老李',dutyName: '调度',phone: '13197372226',id: 3},]},},/*** 组件的初始数据*/data: {index: -1,Xstart: 0,isAnimation: false,aniMation: {},id: -1},/*** 组件的方法列表*/methods: {getPx(rpx) {let pxwx.getSystemInfo({success(res) {px = rpx * (res.windowWidth / 750)}})return Number(px)},touchstart(e) {if (this.data.isAnimation) {this.createAnimationPX(0)}this.setData({index: e.currentTarget.dataset.index,Xstart: e.changedTouches[0].pageX});},touchmove(e) {//  从右往左的移动距离 = 触摸初始位置x坐标 - 当前位置的x坐标let move = this.data.Xstart - e.changedTouches[0].pageX;// 当从右往左位移大于0px的时候 调用方法创建动画if (move > 0) {this.createAnimationPX(-move)} else {// 当从左往右滑动的时候将让卡片复位this.createAnimationPX(0)}},touchend(e) {//  从右往左的移动距离 = 触摸初始位置x坐标 - 当前位置的x坐标let move = this.data.Xstart - e.changedTouches[0].pageX;// 当位移大于50px的时候认为展示删除按钮if (move > 50) {this.createAnimation(-160)} else {// 复位this.createAnimation(0)}},// 创建一个左滑动画基于 rpx单位createAnimation(changeX) {let list = this.properties.list;if (list.length != 0) {let ani = wx.createAnimation({delay: 0,timingFunction: 'ease',}).translateX(this.getPx(changeX)).step().export()list[this.data.index].aniMation = anithis.setData({list,isAnimation: true})}},// 创建一个左滑的动画 基于px单位createAnimationPX(changeX) {let list = this.properties.list;if (list.length != 0) {let ani = wx.createAnimation({delay: 0,timingFunction: 'linear',duration: 45}).translateX(changeX).step().export()list[this.data.index].aniMation = anithis.setData({list,isAnimation: true})}},delete(e) {let itemIndex = e.currentTarget.dataset.indexlet arr = []let list = this.properties.listlist.map((item, index) => {if (index != itemIndex) {arr.push(item)}})this.setData({list: arr,isAnimation: true})wx.showToast({title: '已成功删除' + list[itemIndex].name,})this.createAnimation(0)this.triggerEvent('delete', {date: this.properties.list[itemIndex],index: itemIndex,list: arr})}}
})

论如何优雅的实现左滑删除（微信小程序）相关推荐

如何让小程序页面更顺滑_微信小程序|实现界面滑动切换
问题描述在许多用户体验效果较好的微信小程序中,用户通过左右滑动界面也能实现页面的切换,方便了用户使用,那它们是如何实现的呢? 解决方案图 1 标签页切换在图1中,顶部的 3 个标签页标题用 ...
小程序怎么清服务器缓存,怎么清理微信小程序缓存微信小程序缓存删除的方法...
微信小程序上线之后,关注的小程序越多,哪么将占用的手机空间就越大,这些程序会产生一定的缓存,那么怎么清理小程序缓存呢?微信小程序内的缓存到底如何清除?和小编一起来看看删除微信小程序缓存的方法吧. 一些 ...
微信小程序左滑删除效果的实现完整源码附效果图
效果图: 功能描述,小程序列表左滑删除功能的实现完整源代码实现: <view wx:for='{{friends}}' wx:key="" wx:if='{{groupTyp ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
Android开发学习之路-PopupWindow和仿QQ左滑删除
这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...
微信小程序独家秘笈之左滑删除
代码地址如下: http://www.demodashi.com/demo/14056.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
android listview标题置顶,Android仿QQ左滑删除置顶ListView操作
最近闲来无事,于是研究了一下qq的左滑删除效果,尝试着实现了一下,先上效果图: 大致思路原理: - 通过设置margin实现菜单的显示与隐藏 - 监听onTouchEvent,处理滑动事件上代码 i ...
android 自定义滑动删除,Android_Android ListView实现仿iPhone实现左滑删除按钮的简单实例，需要自定义ListView。这里就交Fl - phpStudy...
Android ListView实现仿iPhone实现左滑删除按钮的简单实例需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Ov ...
小程序uniapp实现左滑删除效果
小程序uniapp实现左滑删除效果实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 < ...