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


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 相关文章推荐
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
微信运维交互机器人的示例代码
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中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP重载基础知识回顾
2020/09/10 PHP
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
javascript基础知识讲解
2017/01/11 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
基于openlayers实现角度测量功能
2020/09/28 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
python正则分析nginx的访问日志
2017/01/17 Python
创建Django项目图文实例详解
2019/06/06 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python实现图片中文字分割效果
2019/07/22 Python
Django 大文件下载实现过程解析
2019/08/01 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
前台文员我鉴定
2014/01/12 职场文书
毕业寄语大全
2014/04/09 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
逃课检讨书范文
2015/05/06 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技