怎么在微信小程序中实现一个item左滑删除功能

怎么在微信小程序中实现一个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:


 
  显示正常内容
  删除
 

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里bindtap一个删除方法即可删除。

看完上述内容,你们掌握怎么在微信小程序中实现一个item左滑删除功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网站题目:怎么在微信小程序中实现一个item左滑删除功能
分享地址:http://scyanting.com/article/jpisih.html