微信小程序左滑删除效果的实现代码


Posted in Javascript onFebruary 20, 2017

今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果.......

先看效果

微信小程序左滑删除效果的实现代码

要实现的效果:

1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮

2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮。

思路:

1,首先页面每个item分为上下两层,上面一层放置正常内容,下面一层放置左滑显示出的按钮,这个可以使用z-index来实现分层。
2,item上层使用绝对定位,我们操纵 left 属性的值来实现像左移动。

3,我们通过微信小程序api提供的touch对象和3个有关手指触摸的函数(touchstart,touchmove,touchend)来实现item随手指移动。

微信小程序左滑删除效果的实现代码

微信小程序左滑删除效果的实现代码

由于比较简单,所以直接上代码了,详细的讲解都在代码的注释中,首先看下页面的布局

<!--这是一个item的代码>
  <view class="address-item" wx:for="{{addressList}}" >
  <!--这里绑定了刚才说的3个函数分别为 touchS,touchM touchE-->
  <!--这里注意这个 style="{{item.txtStyle}}" ,这是我们一会再js中 将要设置的样式 -->
    <view style="{{item.txtStyle}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" class="address-item-top" >
     <!--中间无关的代码已被我删除-->
    </view>

     <!--这里是左滑按钮部分----start-->
    <view bindtap="delItem" class="posit">
      <view class="editor" data-addressid="{{item.address.ID}}" catchtap="setDefaultAddress">设为默认地址</view>
      <view class="del" data-addressid="{{item.address.ID}}" data-index="{{index}}" catchtap="delAddress">删除</view>
    </view>
     <!--这里是左滑按钮部分----end-->
  </view>

再看js代码

Page({
 data:{
  addressList:[{"Contact":"钟诚","Mobile":13888888888,"Address":"江苏省苏州市工业园区创意产业园"},
{"Contact":"凹凸曼","Mobile":13666666666,"Address":"江苏省苏州市工业园区独墅湖体育馆"},
{"Contact":"图傲曼","Mobile":13666666666,"Address":"江苏省苏州市工业园区独墅湖体育馆"}],
  editIndex:0,
  delBtnWidth:150//删除按钮宽度单位(rpx)
 },
 onLoad:function(options){},
 //手指刚放到屏幕触发
 touchS:function(e){
  console.log("touchS"+e);
  //判断是否只有一个触摸点
  if(e.touches.length==1){
   this.setData({
    //记录触摸起始位置的X坐标
    startX:e.touches[0].clientX
   });
  }
 },
 //触摸时触发,手指在屏幕上每移动一次,触发一次
 touchM:function(e){
   console.log("touchM:"+e);
  var that = this
  if(e.touches.length==1){
   //记录触摸点位置的X坐标
   var moveX = e.touches[0].clientX;
   //计算手指起始点的X坐标与当前触摸点的X坐标的差值
   var disX = that.data.startX - moveX;
   //delBtnWidth 为右侧按钮区域的宽度
   var delBtnWidth = that.data.delBtnWidth;
   var txtStyle = "";
   if(disX == 0 || disX < 0){//如果移动距离小于等于0,文本层位置不变
    txtStyle = "left:0px";
   }else if(disX > 0 ){//移动距离大于0,文本层left值等于手指移动距离
    txtStyle = "left:-"+disX+"px";
    if(disX>=delBtnWidth){
     //控制手指移动距离最大值为删除按钮的宽度
     txtStyle = "left:-"+delBtnWidth+"px";
    }
   }
   //获取手指触摸的是哪一个item
   var index = e.currentTarget.dataset.index;
   var list = that.data.addressList;
   //将拼接好的样式设置到当前item中
   list[index].txtStyle = txtStyle; 
   //更新列表的状态
   this.setData({
    addressList:list
   });
  }
 },
 touchE:function(e){
   console.log("touchE"+e);
  var that = this
  if(e.changedTouches.length==1){
   //手指移动结束后触摸点位置的X坐标
   var endX = e.changedTouches[0].clientX;
   //触摸开始与结束,手指移动的距离
   var disX = that.data.startX - endX;
   var delBtnWidth = that.data.delBtnWidth;
   //如果距离小于删除按钮的1/2,不显示删除按钮
   var txtStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:0px";
   //获取手指触摸的是哪一项
   var index = e.currentTarget.dataset.index;
   var list = that.data.addressList;
   list[index].txtStyle = txtStyle; 
   //更新列表的状态
   that.setData({
    addressList:list
   });
  }
 }

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

Javascript 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
JavaScript轮播图简单制作方法
Feb 20 #Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 #Javascript
原生js实现放大镜
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 #Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 #Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 #Javascript
原生node.js案例--前后台交互
Feb 20 #Javascript
You might like
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
django基础学习之send_mail功能
2019/08/07 Python
pycharm导入源码的具体步骤
2020/08/04 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
保洁主管岗位职责
2013/11/20 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
2014年党务公开方案
2014/05/08 职场文书
中国梦口号
2014/06/13 职场文书
学术研讨会主持词
2015/07/04 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL