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

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

首先声明两点：

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

下面的只是 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><viewcatchtap="delOrder" data-index='{{index}}' data-order_id='{{item.order_id}}'>删除</view></view>JS 部分

JS 中根据绑定的 touch 事件触发删除按钮，用户点击删除，发送请求，根据返回值对用户进行反馈。Page({/*** 页面的初始数据*/data: {array:[],delBtnWidth: 150//删除按钮宽度单位（rpx）},/*** 手指触摸开始*/touchS: function (e) {//判断是否只有一个触摸点if (e.touches.length == 1) {this.setData({//记录触摸起始位置的X坐标startX: e.touches[0].clientX});}},/*** 手指触摸滑动*/touchM: function (e) {var that = this;if (e.touches.length == 1) {//记录触摸点位置的X坐标var moveX = e.touches[0].clientX;//计算手指起始点的X坐标与当前触摸点的X坐标的差值var disX = that.data.startX - moveX;//delBtnWidth 为右侧按钮区域的宽度var delBtnWidth = that.data.delBtnWidth;var txtStyle = "";if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变txtStyle = "left:0px";} else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离txtStyle = "left:-" + disX + "px";if (disX >= delBtnWidth) {//控制手指移动距离最大值为删除按钮的宽度txtStyle = "left:-" + delBtnWidth + "px";}}//获取手指触摸的是哪一个itemvar index = e.currentTarget.dataset.index;var list = that.data.array;//将拼接好的样式设置到当前item中list[index].txtStyle = txtStyle;//更新列表的状态this.setData({array: list});}},/*** 手指触摸结束*/touchE: function (e) {var that = this;if (e.changedTouches.length == 1) {//手指移动结束后触摸点位置的X坐标var endX = e.changedTouches[0].clientX;//触摸开始与结束，手指移动的距离var disX = that.data.startX - endX;var delBtnWidth = that.data.delBtnWidth;//如果距离小于删除按钮的1/2，不显示删除按钮var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";//获取手指触摸的是哪一项var index = e.currentTarget.dataset.index;var list = that.data.array;list[index].txtStyle = txtStyle;//更新列表的状态that.setData({array: list});}},/*** 删除订单*/delOrder: function (e) {var order_id = e.currentTarget.dataset.order_id;var index = e.currentTarget.dataset.index;var that = this;// 请求接口wx.request({url: 'xxxx',data: {order_id: order_id},success: function (res) {if (res.data.message == 'success') {// 删除成功that.delItem(index)} else if (res.data.message == 'error') {// 删除失败}},fail: function () {// 网络请求失败}})},/*** 删除页面item*/delItem: function (index) {var list = this.data.arraylist.splice(index, 1);this.setData({array: list});}})

以上就是小程序开发之左滑删除页面（代码示例）的详细内容，更多请关注小潘博客其它相关文章！