小程序左滑删除

最新推荐文章于 2023-08-14 21:56:04 发布

hangGe0111

最新推荐文章于 2023-08-14 21:56:04 发布

阅读量441

点赞数 1

分类专栏：微信小程序文章标签：小程序左滑删除

本文链接：https://blog.csdn.net/hangGe0111/article/details/101367061

版权

本文介绍了在小程序中实现列表左滑删除的两种方法：一种是通过touch事件和translateX控制，另一种是利用scroll-view组件的scroll-x属性。重点推荐使用scroll-view，因为它简化了实现过程，减少了计算。在实现过程中需要注意wx:key的正确使用，以避免循环列表时出现状态错乱的问题。

摘要由CSDN通过智能技术生成

1.场景：在做列表页和收藏页面都用到了列表的样式，就想着做一个组件或者模板，都能共用，但收藏又有不同，因为收藏页的列表有取消（即就是取消收藏），产品要求是删除按钮是隐藏的，只有左滑才会出现，点击删除按钮就会取消收藏。当时立马就有了思路，然后开干。

2.思路：

2.1 思路一：通过touch事件来判定是否左滑，通过translateX来控制左滑或者右滑，当时在看云信im的小程序代码，它就是通过这个方式来实现的，并且做成了一个组件，可以直接使用（这个思路也是最常想到的思路，最常用的）。后来老大说可能后续会用小程序官方的组件来重构，不要用component组件的方式，后来想着干脆把这些代码拿出来无非两个事件在需要的页面写就行，但感觉不太好（会有重复的），想想有没有别的方式来实现。后来想到了思路二。

2.2 思路二：通过小程序的scroll-view组件设置scroll-x='true'来实现，然后尝试了一下，挺方便的（大喜），不用touch事件，不用translateX来设置，不用计算，统统都不用，只一个标签搞定。（当然了，也踩了一点不算小坑的小坑，后续会说明）。

3.代码实现

3.1组件的方式

3.1.1 wxml

<view class='swipedelete-wrapper' bindtouchmove='touchMoveHandler' bindtouchstart='touchStartHandler' style="transform:translateX({
  {translateX}}px)">
  <slot></slot>
  <view class='swipedelete-btn' bindtap='deleteItem'>删除</view>
</view>

3.1.2 wxss

.swipedelete-wrapper {
  transition: all .4s ease;
}
.swipedelete-btn {
  position:absolute;
  top:0;
  right:-180rpx;
  text-align:center;
  background: #f00;
  color:#fff;
  width:160rpx;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

3.1.3 js<