微信小程序列表中item左滑删除功能


Posted in Javascript onNovember 07, 2018

第一步:把想要的两种样式写出来

1.正常显示的样式

微信小程序列表中item左滑删除功能

css:

.box{
 height: 100%;
}
.item{
 position:relative;
 top: 0;
 width: 100%;
 height: 150rpx;
 border-bottom: #d9d9d9 solid 1rpx;
 padding: 0;
}
.item .content{
 background-color: #ffffff;
 height: 100%;
 position: relative;
 left: 0;
 width: 100%;
 transition: all 0.3s;
}
.item .del-button {
 position: absolute;
 right: -140rpx;
 width: 140rpx;
 height: 100%;
 background-color: #df3448;
 color: #fff;
 top: 0;
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 0.3s;
 font-size: 24rpx;
}

xwml:

<view class="box">
 <view class="item {{status ? '' :'active'}}">
  <view class="content">显示正常内容</view>
  <view class="del-button">删除</view>
 </view>
</view>

2.显示删除按钮

微信小程序列表中item左滑删除功能

.item.active .content{
 left: -140rpx;
}
.item.active .del-button{
 right: 0;
}

同时在js中控制样式是否active

data: {
  status:false //true为正常显示,false为显示删除按钮
 },

第二步:绑定事件

其实此时可以绑定bindtap事件,来切换active的状态,点击一下是“显示正常内容”,再点击一下是“删除”。然后,现在把点击事件改成touch并向左move之后再触发,就很好理解了。(样式中,已经提前写好的transition: all 0.3s;就是为了使两个状态之间有个过渡)

微信小程序提供了两个事件可以使用,一个是bindtouchstart,通过这个事件我们可以获得用户刚点击(手指还未抬起)时的坐标。

touchS(e) {
 // 获得起始坐标
 this.startX = e.touches[0].clientX;
 this.startY = e.touches[0].clientY;
},

还有一个是bindtouchmove,我们可以一直获取当前的坐标(用户手指一直在屏幕上滑动时)。因此,我们只需要得到x轴上的移动的前后坐标相减是正数,就是向左移动。

touchM(e) {
  // 获得当前坐标
  this.currentX = e.touches[0].clientX;
  this.currentY = e.touches[0].clientY;
  const x = this.startX - this.currentX; //横向移动距离
  const y = Math.abs(this.startY - this.currentY); //纵向移动距离,若向左移动有点倾斜也可以接受
  if (x > 35 && y < 110) {
  //向左滑是显示删除
   this.setData({
    status: false
   })
  } else if (x < -35 && y < 110) {
  //向右滑
   this.setData({
    status: true
   })
  }
 },

然后绑定到Item上

<view class="box">
 <view class="item {{status ? '' :'active'}}">
  <view class="content" bindtouchstart="touchS" bindtouchmove="touchM">显示正常内容</view>
  <view class="del-button">删除</view>
 </view>
</view>

最后再在删除的view里bindtap一个删除方法即可删除。

以上是最简版的效果,还需很多优化要自行添加。

总结

以上所述是小编给大家介绍的微信小程序列表中item左滑删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jquery中radio checked问题
Mar 16 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
原生JS进行前后端同构
Apr 22 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 #Javascript
VueCli3构建TS项目的方法步骤
Nov 07 #Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 #Javascript
vue+webpack中配置ESLint
Nov 07 #Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 #Javascript
React 源码中的依赖注入方法
Nov 07 #Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
10个php函数实用却不常见
2015/10/13 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JS定时器实例
2013/04/17 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
简单的js表格操作
2016/09/24 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
详解Python迭代和迭代器
2016/03/28 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
在职研究生自我鉴定
2013/10/16 职场文书
酒店司机岗位职责
2013/12/14 职场文书
首次购房证明
2015/06/19 职场文书
2016国庆促销广告语
2016/01/28 职场文书
python绘制箱型图
2021/04/27 Python