直接进入正题, 我们需要做的就是通过手指滑动列表项后, 右侧出现删除; 比如说像这样:
向左边滑动后出现如下的效果:
开始撸代码~ 假设我们有 N 个列表项来自一个数组 list, 先确定基本的结构
- <view class="list" wx:for="{{list}}" wx:key>
- <view class="item">
- <view class="wrap">{{item}}</view>
- <view class="delete"><text > 删除 </text></view>
- </view>
- </view>
在 item 中分别放入 wrap 作为显示项目内容的容器, 与 delete 删除按钮的容器. 当我们手指向左滑动 wrap 时, wrap 容器向左移动; 此时 delete 从 wrap 容器之后显示出来; 换句话说我们喜欢 wrap 容器盖住 delete, 使 wrap 默认在 delete 上方. 没错, 我们用样式来实现效果.
- .item{ position:relative; }
- .wrap{
- position:absolute;z-index:2; top:0;left:0;
- backgorund:#fff;width:100%;height:100%;
- }
- .delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}
好了, 这些我们需要的核心样式, 为了 wrap 能 100% 盖住 delete, 我们给到它宽高都是百分之百, 并且填充背景颜色是必然的, 至于要怎么美化可自行添加需要的样式. 基本的结构就到这里了, 接下来我们为 wrap 添加触摸事件;
- <view class="wrap"
- data-index="{{index}}"
- bindtouchstart='touchstart'
- bindtouchmove='touchmove'
- bindtouchend='touchend'
- >{{item}}</view>
我们绑定了三个触摸事件, 分别是, 触摸开始, 触摸时移动以及触摸结束. 同时有个 wrap 添加了 data-index="{{index}}" 这样我们就可以确定当前触摸的列表项是哪一个. 接着我们来为他们添加对应的方法.
- touchstart:function(e){
- this.setData({
- index: e.currentTarget.dataset.index,
- Mstart: e.changedTouches[0].pageX
- });
- }
通过 touchstart 方法我们将当前触发事件元素的索引保存到 index, 并且获得当前手指触摸的坐标位置 e.changedTouches[0].pageX;
e.changedTouches[0].pageX
屏幕的左上角的坐标为 (0,0), 离左上角的距离越大 pageX 的值也越大.
下一步, 当我们移动手指向左滑动时:
- touchmove: function (e) {
- // 列表项数组
- let list = this.data.list;
- // 手指在屏幕上移动的距离
- // 移动距离 = 触摸的位置 - 移动后的触摸位置
- let move = this.data.Mstart - e.changedTouches[0].pageX;
- // 这里就使用到我们之前记录的索引 index
- // 比如你滑动第一个列表项 index 就是 0, 第二个列表项就是 1,...
- // 通过 index 我们就可以很准确的获得当前触发的元素, 当然我们需要在事前为数组 list 的每一项元素添加 x 属性
- list[this.data.index].x = move> 0 ? -move : 0;
- this.setData({
- list: list
- });
- }
当移动后的触摸位置小于最初触发的位置时, 说明手指是向左滑动, 因为 pageX 越小就越向屏幕边缘靠近; 这个时候 move 就是 wrap 容器需要向左移动的距离. 我们重写 list[this.data.index].x 的值, 并且将原有的 list 覆盖, 这样我们在滑动的时候就能实时的看到元素跟随手指移动的效果; 这个时候我们可以发现, 我们一直往左边移动, wrap 元素就会被推到屏幕的边缘; 这很明显不是我们想要的效果, 我们希望滑动到一定距离后就停止滑动, 于是我们为其添加最后一个方法;
- touchend: function (e) {
- let list = this.data.list;
- let move = this.data.Mstart - e.changedTouches[0].pageX;
- list[this.data.index].x = move> 100 ? -180 : 0;
- this.setData({
- list: list
- });
- },
我们看到这个方法唯一的不同的地方是这一行
list[this.data.index].x = move> 100 ? -180 : 0
意思是当手指离开元素时, 如果移动的距离大于 100, 那么元素将自动向左移动到 180 的距离, 如果小于 100 那么元素将向右恢复. 接着我们给 wrap 元素添加 style, 这样它就能获得移动的距离 x. 至于为什么要移动距离要除以 2, 这个跟小程序使用 rpx 单位有关系; 之前我们写 100,-180 是像素 px, 需要换算成 rpx; 微信小程序开发尺寸单位文档
设备 rpx 换算 px (屏幕宽度 / 750) px 换算 rpx (750 / 屏幕宽度) iPhone5,1rpx = 0.42px,1px = 2.34rpx iPhone6,1rpx = 0.5px,1px = 2rpx iPhone6 Plus,1rpx = 0.552px,1px = 1.81rpx
我们看到基本是 2 倍的比例;
- <view class="wrap"
- style="transform:translateX({{item.x/2}}px);"
- data-index="{{index}}"
- bindtouchstart='touchstart'
- bindtouchmove='touchmove'
- bindtouchend='touchend'
- >{{item}}</view>
最后我们使用样式为 wrap 元素添加过渡效果就基本完成了.
详细案例请搜索微信小程序: 52 魔都
源码地址: https://github.com/749264345/wechat-weapp-map
来源: https://juejin.im/post/5be81e1251882516f578628a