Mini program development: Left swipe to delete page (code example)

The content of this article is about the left-swipe deletion page (code example) in the development of small programs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all declare two points:

1. The ideas and codes are modified and supplemented based on the data. The original address is here

2. The following is just a demo, you can modify and improve it according to your own needs

The implementation ideas are excerpted as follows

1, first of all, each page The item is divided into two layers, the upper layer is placed with normal content, and the lower layer is placed with buttons displayed by left sliding. This can be achieved using z-index.

2. The upper layer of the item uses absolute positioning. We manipulate the value of the left attribute to move the image to the left.

3, we use the touch object provided by the WeChat applet api and three functions related to finger touch (touchstart, touchmove, touchend) to realize the item moving with the finger.

Page part

There is no too complicated logic in the page. In addition to the normal loop output data, you need to add binding touch events.

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

    </view>
    <view  catchtap="delOrder" data-index=&#39;{{index}}&#39; data-order_id=&#39;{{item.order_id}}&#39;>删除</view>
</view>

JS part

The delete button is triggered in JS according to the bound touch event. The user clicks delete, sends a request, and gives feedback to the user based on the return value.

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";
                }
            }
            //获取手指触摸的是哪一个item
            var 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.array
        list.splice(index, 1);
        this.setData({
            array: list
        });
    }
})

The above is the detailed content of Mini program development: Left swipe to delete page (code example). For more information, please follow other related articles on the PHP Chinese website!