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


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刷新站IP和PV
Sep 05 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
jquery插件validate验证的小例子
May 08 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
vue实现购物车列表
2020/06/30 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
github配置使用指南
2014/11/18 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python获取当前日期和时间的方法
2015/04/30 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
大学生物业管理求职信
2013/10/24 职场文书
英文自我鉴定
2013/12/10 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
金融专业求职信
2014/08/05 职场文书
计划生育诚信协议书
2014/11/02 职场文书
经济纠纷起诉状
2015/05/20 职场文书
分家协议书范本
2016/03/22 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android