Développement de mini-programmes : glisser vers la gauche pour supprimer la page (exemple de code)

Le contenu de cet article concerne la page de suppression par balayage gauche (exemple de code) dans le développement de petits programmes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Tout d'abord, permettez-moi de déclarer deux points :

1. Les idées et les codes sont modifiés et complétés en fonction des informations sur l'adresse d'origine. est ici

2. Ce qui suit n'est qu'une démo, vous pouvez le modifier et l'améliorer en fonction de vos propres besoins

Les idées de mise en œuvre sont extraites sous forme suit

1. Tout d'abord, chaque page L'élément est divisé en deux calques, le calque supérieur est placé avec un contenu normal et le calque inférieur est placé avec des boutons affichés par glissement vers la gauche. indice.

2. La couche supérieure de l'élément utilise un positionnement absolu. Nous manipulons la valeur de l'attribut gauche pour le déplacer vers la gauche.

3. Nous utilisons l'objet tactile fourni par l'API de l'applet WeChat et trois fonctions liées au toucher du doigt (touchstart, touchmove, touchend) pour réaliser que l'élément bouge avec le doigt.

Partie page

Il n'y a pas de logique trop compliquée dans la page En plus des données de sortie de boucle normales, des événements de liaison touch doivent être ajoutés.

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

Partie JS

Le bouton de suppression est déclenché dans JS en fonction de l'événement tactile lié. L'utilisateur clique sur Supprimer, envoie une demande et fournit des commentaires à. l'utilisateur en fonction de la valeur de retour.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!