折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 20|回复: 0

[文档教程] 微信小程序左滑删除功能详解

[复制链接]

6981

主题

7363

帖子

285

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2018-11-23 11:22:32 | 显示全部楼层 |阅读模式
直接进入正题,我们需要做的就是通过手指滑动列表项后,右侧出现删除;
比如说像这样:

e0178f8888c7442f9f15849a14828e13.png

向左边滑动后出现如下的效果:

e0178f8888c7442f9f15849a14828e13.png

开始撸代码~
假设我们有N个列表项来自一个数组list,先确定基本的结构
  1. {{item}}
  2. 删除
复制代码
复制代码
在item中分别放入wrap作为显示项目内容的容器,与delete删除按钮的容器。

当我们手指向左滑动wrap时,wrap容器向左移动;此时delete从wrap容器之后显示出来;换句话说我们喜欢wrap容器盖住delete,使wrap默认在delete上方。
没错,我们用样式来实现效果。
  1. .item{ position:relative; }
  2. .wrap{
  3. position:absolute;z-index:2; top:0;left:0;
  4. backgorund:#fff;width:100%;height:100%;
  5. }
  6. .delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}
复制代码
复制代码
好了,这些我们需要的核心样式,为了wrap能100%盖住delete,我们给到它宽高都是百分之百,并且填充背景颜色是必然的,至于要怎么美化可自行添加需要的样式。
基本的结构就到这里了,接下来我们为wrap添加触摸事件;
  1. {{item}}
复制代码
复制代码
我们绑定了三个触摸事件,分别是,触摸开始,触摸时移动以及触摸结束。
同时有个wrap添加了data-index="{{index}}" 这样我们就可以确定当前触摸的列表项是哪一个。
接着我们来为他们添加对应的方法。
  1. touchstart:function(e){
  2. this.setData({
  3. index: e.currentTarget.dataset.index,
  4. Mstart: e.changedTouches[0].pageX
  5. });
  6. }
复制代码
复制代码
通过touchstart方法我们将当前触发事件元素的索引保存到index,并且获得当前手指触摸的坐标位置e.changedTouches[0].pageX;
  1. e.changedTouches[0].pageX
复制代码
复制代码
屏幕的左上角的坐标为(0,0),离左上角的距离越大pageX的值也越大。

下一步,当我们移动手指向左滑动时:
  1. touchmove: function (e) {
  2. //列表项数组
  3. let list = this.data.list;
  4. //手指在屏幕上移动的距离
  5. //移动距离 = 触摸的位置 - 移动后的触摸位置
  6. let move = this.data.Mstart - e.changedTouches[0].pageX;
  7. // 这里就使用到我们之前记录的索引index
  8. //比如你滑动第一个列表项index就是0,第二个列表项就是1,···
  9. //通过index我们就可以很准确的获得当前触发的元素,当然我们需要在事前为数组list的每一项元素添加x属性
  10. list[this.data.index].x = move > 0 ? -move : 0;
  11. this.setData({
  12. list: list
  13. });
  14. }
复制代码
复制代码
当移动后的触摸位置小于最初触发的位置时,说明手指是向左滑动,因为pageX越小就越向屏幕边缘靠近;这个时候move就是wrap容器需要向左移动的距离。
我们重写list[this.data.index].x的值,并且将原有的list覆盖,这样我们在滑动的时候就能实时的看到元素跟随手指移动的效果;
这个时候我们可以发现,我们一直往左边移动,wrap元素就会被推到屏幕的边缘;这很明显不是我们想要的效果,我们希望滑动到一定距离后就停止滑动,于是我们为其添加最后一个方法;
  1. touchend: function (e) {
  2. let list = this.data.list;
  3. let move = this.data.Mstart - e.changedTouches[0].pageX;
  4. list[this.data.index].x = move > 100 ? -180 : 0;
  5. this.setData({
  6. list: list
  7. });
  8. },
复制代码
复制代码
我们看到这个方法唯一的不同的地方是这一行
  1. 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倍的比例;
  1. {{item}}
复制代码
复制代码
最后我们使用样式为wrap元素添加过渡效果就基本完成了。

代码下载:wechat-weapp-map-master.zip(476.76 KB, 下载次数: 2)