小程序开发之左滑删除页面（代码示例）

本篇文章给大家带来的内容是关于小程序开发之左滑删除页面（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

首先声明两点：

1. 思路以及代码，是根据资料进行一些修改以及补充，原文地址在此

2. 下面的只是 demo，各位根据自己的需要进行修改完善

实现的思路摘抄如下

1，首先页面每个item分为上下两层，上面一层放置正常内容，下面一层放置左滑显示出的按钮，这个可以使用z-index来实现分层。

2，item上层使用绝对定位，我们操纵  left  属性的值来实现像左移动。

3，我们通过微信小程序api提供的touch对象和3个有关手指触摸的函数（touchstart，touchmove，touchend）来实现item随手指移动。

页面部分

在页面中没有太复杂的逻辑，除了正常的循环输出数据，需要添加绑定 touch 事件。

<view wx:for="{{array}}">
    <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.txtStyle}}" data-index="{{index}}">
      <!-- 省略数据 -->

    </view>
    <view  catchtap="delOrder" data-index='{{index}}' data-order_id='{{item.order_id}}'>删除</view>
</view>