微信小程序左滑删除功能开发案例详解


Posted in Javascript onNovember 12, 2018

直接进入正题,我们需要做的就是通过手指滑动列表项后,右侧出现删除;

比如说像这样:

微信小程序左滑删除功能开发案例详解

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

微信小程序左滑删除功能开发案例详解

开始撸代码~

假设我们有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元素添加过渡效果就基本完成了。

源码地址:https://github.com/749264345/wechat-weapp-map

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
jquery中键盘事件小结
Feb 24 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
微信运维交互机器人的示例代码
Nov 12 #Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 #Javascript
vue elementui form表单验证的实现
Nov 11 #Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 #Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 #Javascript
Vue项目引进ElementUI组件的方法
Nov 11 #Javascript
You might like
php中的登陆login
2007/01/18 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
基于JS实现快速读取TXT文件
2020/08/25 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
python安装与使用redis的方法
2016/04/19 Python
OpenCV实现人脸识别
2017/04/07 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
村官工作鉴定评语
2014/01/27 职场文书
产品售后服务承诺书
2014/05/21 职场文书
社会学专业求职信
2014/07/17 职场文书
党员四风剖析材料
2014/08/27 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书