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

 更新时间:2018年11月07日 14:52:13   作者:猿猿猿_yyy   我要评论

这篇文章主要介绍了微信小程序列表中item左滑删除功能,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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.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 prototype原型操作笔记

    javascript prototype原型操作笔记

    在 JavaScript 中,prototype 不但能让对象共享自己财富,而且 prototype 还有寻根问祖的天性,从而使得先辈们的遗产可以代代相传。
    2009-12-12
  • javascript 手机号码验证是否正确

    javascript 手机号码验证是否正确

    javascript 手机号码验证实现代码。
    2009-06-06
  • js读取配置文件自写

    js读取配置文件自写

    这篇文章主要介绍了js读取配置文件的方法,需要的朋友可以参考下
    2014-02-02
  • 移动端效果之Swiper详解

    移动端效果之Swiper详解

    这篇文章主要为大家详细介绍了移动端效果之Swiper的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • js 处理URL实用技巧

    js 处理URL实用技巧

    escape()、encodeURI()、encodeURIComponent()三种方法都能对一些影响URL完整性的特殊字符进行过滤。
    2010-11-11
  • 基于javascript实现按圆形排列DIV元素(一)

    基于javascript实现按圆形排列DIV元素(一)

    本篇文章主要介绍基于javascript实现按圆形排列DIV元素的方法,此文着重于介绍对实现的按圆形排列DIV元素的分析,需要的朋友来看下吧
    2016-12-12
  • 基于JavaScript实现的希尔排序算法分析

    基于JavaScript实现的希尔排序算法分析

    这篇文章主要介绍了基于JavaScript实现的希尔排序算法,简单分析了希尔排序的原理并结合实例形式给出了javascript实现希尔排序的操作步骤与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • 手机软键盘弹出时影响布局的解决方法

    手机软键盘弹出时影响布局的解决方法

    这篇文章主要介绍了手机软键盘弹出时影响布局的解决方法的相关资料,大家开发移动端的软件时候,肯定会因为软键盘的弹窗影响布局,这里说下如何解决,需要的朋友可以参考下
    2016-12-12
  • JavaScript注册时密码强度校验代码

    JavaScript注册时密码强度校验代码

    这篇文章主要为大家详细介绍了JavaScript注册时密码强度校验代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Bootstrap每天必学之折叠

    Bootstrap每天必学之折叠

    Bootstrap每天必学之折叠,本文向大家讲解了Bootstrap折叠操作,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论