微信小程序实现左滑修改、删除功能微信小程序实现左滑修改、删除功能
主要为大家详细介绍了微信小程序实现左滑修改、删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参
考一下
本文实例为大家分享了微信小程序实现左滑修改、删除的具体代码，供大家参考，具体内容如下
wxml：
<view class="offer-item" wx:for-items='{{offerList}}'>
<!--这里绑定了刚才说的3个函数分别为 touchS，touchM touchE-->
<!--这里注意这个 style="{{item.txtStyle}}" ，这是我们一会再js中 将要设置的样式 -->
<view style="{{item.txtStyle}}">
<view class="offer-item-top fl clearfix" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}">
<navigator bindtap='navigatorTo' data-index="{{item.id}}">
<view class='content'>
<view class='title clearfix'>
<view class='fl'>
{{item.title}}党建项目报价表
</view>
<image src='../../images/right.png' class='fr'></image>
</view>
<view class='note clearfix'>
<view class='price fl'>
{{item.create_time}}
</view>
</view>
</view>
</navigator>
</view>
<!--这里是左滑按钮部分----start-->
<view bindtap="delItem" class='posit fr isMove' hidden='{{!item.isMove}}'>
<view class="ref" data-offerid="{{item.id}}" data-index="{{item.id}}" catchtap="ref">
<image src='../../images/ref.png'></image>
</view>
<view class="del" data-offerid="{{item.id}}" data-index="{{item.id}}" catchtap="del">
<image src='../../images/default.png'></image>
</view>
</view>
<!--这里是左滑按钮部分----end-->
</view>
</view>
wxss：
.offer-item {
height: 150rpx;
width: 100vw;
overflow-x: hidden;
border-bottom: 1px solid #f0f0f0;
}
.offer-item>view {
position: absolute;
/* width: calc(100% + 200rpx); */
height: 150rpx;
}
.offer-item .offer-item-top {
height: 100%;
}
.offer-item .offer-item-top navigator {
display: inline-block;
width: 100vw;
height: 100%;
}
.offer-item .content {
padding: 35rpx 30rpx;
position: relative;
height: calc(100% - 70rpx);
}
.offer-item .title .fl {
display: inline-block;
