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


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 创建对象(常见的几种方法)
Nov 03 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
javascript 函数使用说明
Apr 07 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 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递归算法和应用方法介绍
2013/04/15 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python实现通过shelve修改对象实例
2014/09/26 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python调用C++程序的方法详解
2017/01/24 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Python如何读写CSV文件
2020/08/13 Python
Django跨域请求原理及实现代码
2020/11/14 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
会计自我鉴定
2014/02/04 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
瘦西湖导游词
2015/02/03 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
Python实现视频中添加音频工具详解
2021/12/06 Python