Entwicklung von Miniprogrammen: Wischen Sie mit der linken Maustaste, um die Seite zu löschen (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Linkswisch-Löschseite (Codebeispiel) bei der Entwicklung kleiner Programme. Ich hoffe, dass er für Sie hilfreich ist.

Lassen Sie mich zunächst zwei Punkte erklären:

1. Die Ideen und Codes werden basierend auf den Informationen der Originaladresse geändert und ergänzt ist hier

2. Das Folgende ist nur eine Demo, Sie können es entsprechend Ihren eigenen Bedürfnissen ändern und verbessern

Die Implementierungsideen sind als Auszüge aufgeführt Es folgt

1. Zuerst wird jede Seite in zwei Ebenen unterteilt, die obere Ebene wird mit normalem Inhalt platziert und die untere Ebene wird mit Schaltflächen platziert, die durch Verschieben nach links erreicht werden können. Index.

2. Die obere Ebene des Elements verwendet die absolute Positionierung. Wir manipulieren den Wert des linken Attributs, um es nach links zu verschieben.

3. Wir verwenden das von der WeChat-Applet-API bereitgestellte Touch-Objekt und drei Funktionen im Zusammenhang mit der Fingerberührung (Touchstart, Touchmove, Touchend), um die Bewegung des Elements mit dem Finger zu realisieren.

Seitenteil

Es gibt keine allzu komplizierte Logik auf der Seite. Zusätzlich zu den normalen Schleifenausgabedaten müssen Bindungsereignisse touch hinzugefügt werden.

<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-Teil

Die Schaltfläche „Löschen“ wird in JS entsprechend dem gebundenen Berührungsereignis ausgelöst. Der Benutzer klickt auf „Löschen“, sendet eine Anfrage und gibt dem Benutzer Feedback basierend auf dem Rückgabewert.

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
        });
    }
})

Das obige ist der detaillierte Inhalt vonEntwicklung von Miniprogrammen: Wischen Sie mit der linken Maustaste, um die Seite zu löschen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!