微信小程序左滑删除效果实现教程

没有高度封装，有人愿意封装优化下的可以弄下

效果图

1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件

<view class="container">  <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">    <view class="content">{{item.content}}</view>    <view class="del" catchtap="del" data-index="{{index}}">删除</view>  </view></view>

2、wxss flex布局、css3动画

.touch-item {  font-size: 14px;  display: flex;  justify-content: space-between;  border-bottom:1px solid #ccc;  width: 100%;  overflow: hidden}.content {  width: 100%;