微信小程序列表中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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
ES6函数实现排它两种写法解析
May 13 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
ScrollDown的基本操作示例
2013/06/09 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python 性能优化方法小结
2017/03/31 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python flask框架post接口调用示例
2019/07/03 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python实现SMTP邮件发送
2020/06/16 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
国际政治个人自荐信范文
2013/11/26 职场文书
机关单位动员会主持词
2014/03/20 职场文书
公司股东出资证明书
2014/11/01 职场文书
乌镇导游词
2015/02/02 职场文书
催款函范本大全
2015/06/24 职场文书
2015双创工作总结
2015/07/24 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
汽车销售合同文本
2019/08/08 职场文书
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS