本篇文章給大家?guī)淼膬?nèi)容是關(guān)于小程序開發(fā)之左滑刪除頁面（代碼示例），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。

首先聲明兩點(diǎn)：

思路以及代碼，是根據(jù)資料進(jìn)行一些修改以及補(bǔ)充，原文地址在此

下面的只是 demo，各位根據(jù)自己的需要進(jìn)行修改完善

實(shí)現(xiàn)的思路摘抄如下

1，首先頁面每個(gè)item分為上下兩層，上面一層放置正常內(nèi)容，下面一層放置左滑顯示出的按鈕，這個(gè)可以使用z-index來實(shí)現(xiàn)分層。

2，item上層使用絕對定位，我們操縱 left 屬性的值來實(shí)現(xiàn)像左移動。

3，我們通過微信小程序api提供的touch對象和3個(gè)有關(guān)手指觸摸的函數(shù)（touchstart，touchmove，touchend）來實(shí)現(xiàn)item隨手指移動。

頁面部分

在頁面中沒有太復(fù)雜的邏輯，除了正常的循環(huán)輸出數(shù)據(jù)，需要添加綁定 touch 事件。

<view wx:for="{{array}}">    <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.txtStyle}}" data-index="{{index}}">      <!-- 省略數(shù)據(jù) -->    </view>    <view  catchtap="delOrder" data-index='{{index}}' data-order_id='{{item.order_id}}'>刪除</view></view>

JS 部分

JS 中根據(jù)綁定的 touch 事件觸發(fā)刪除按鈕，用戶點(diǎn)擊刪除，發(fā)送請求，根據(jù)返回值對用戶進(jìn)行反饋。

Page({    /**     * 頁面的初始數(shù)據(jù)     */    data: {        array:[],        delBtnWidth: 150//刪除按鈕寬度單位（rpx）    },    /**     * 手指觸摸開始     */    touchS: function (e) {        //判斷是否只有一個(gè)觸摸點(diǎn)        if (e.touches.length == 1) {            this.setData({                //記錄觸摸起始位置的X坐標(biāo)                startX: e.touches[0].clientX            });        }    },    /**     * 手指觸摸滑動     */    touchM: function (e) {        var that = this;        if (e.touches.length == 1) {            //記錄觸摸點(diǎn)位置的X坐標(biāo)            var moveX = e.touches[0].clientX;            //計(jì)算手指起始點(diǎn)的X坐標(biāo)與當(dāng)前觸摸點(diǎn)的X坐標(biāo)的差值            var disX = that.data.startX - moveX;            //delBtnWidth 為右側(cè)按鈕區(qū)域的寬度            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";                }            }            //獲取手指觸摸的是哪一個(gè)item            var index = e.currentTarget.dataset.index;            var list = that.data.array;            //將拼接好的樣式設(shè)置到當(dāng)前item中            list[index].txtStyle = txtStyle;            //更新列表的狀態(tài)            this.setData({                array: list            });        }    },    /**     * 手指觸摸結(jié)束     */    touchE: function (e) {        var that = this;        if (e.changedTouches.length == 1) {            //手指移動app軟件開發(fā)
結(jié)束后觸摸點(diǎn)位置的X坐標(biāo)            var endX = e.changedTouches[0].clientX;            //觸摸開始與結(jié)束，手指移動的距離            var disX = that.data.startX - endX;            var delBtnWidth = that.data.delBtnWidth;            //如果距離小于刪除按鈕的1/2，不顯示刪除按鈕            var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";            //獲取手指觸摸的是哪一項(xiàng)            var index = e.currentTarget.dataset.index;            var list = that.data.array;            list[index].txtStyle = txtStyle;            //更新列表的狀態(tài)            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 () {                // 網(wǎng)絡(luò)請求失敗            }        })    },    /**     * 刪除頁面item     */    delItem: function (index) {        var list = this.data.array        list.splice(index, 1);        this.setData({            array: list        });    }})              
              

            
微信小程序,php