h5頁面左滑刪除

小程序購物車左滑刪除功能

左滑刪除這個效果在移動端購物車頁面都會用到，近期項目須要這個功能，我發現小程序自己並無提供這個功能，因此只好本身動手，實現這個左滑刪除的效果了。

相似QQ側滑刪除功能

1.橫向左側滑刪除按鈕顯示,右側滑刪除按鈕隱藏;

2.衆向滑動頁面,不觸發滑動刪除;

3.當前刪除按鈕顯示後,禁止可在左滑動,只容許右滑動隱藏按鈕;

4.刪除按鈕顯示後,觸發其餘項左側刪除時,隱藏上次刪除按鈕

頁面效果

wxml代碼

//<scroll-view scroll-y="{{isScroll}}" style='height:{{windowHeight}}px'>
    <block wx:key="item" wx:for="{{data}}">
        <view data-index='{{index}}' class="order-item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{item.right}}rpx;transition:all .3s;">
            <view class="content">{{item.content}}</view>
            <view class="remove" bindtap="delItem">刪除 </view>
        </view>
    </block>
//</scroll-view>

註釋:使用了 scroll-view組件,就不支持微信小程序下拉刷新 onPullDownRefresh,根據本身項目定 
複製代碼

js

Page({
    data: {
        delBtnWidth:160,
        data: [{ content: "1", right: 0 }, { content: "2", right: 0 }, { content: "3", right: 0 }, { content: "4", right: 0 }, { content: "5", right: 0 }, { content: "6", right: 0 }, { content: "7", right: 0 }, { content: "8", right: 0 }, { content: "9", right: 0 }, { content: "10",  right: 0 }],
        isScroll:true,
        windowHeight:0,
    },
    onLoad: function (options) {
        var that = this;
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    windowHeight: res.windowHeight
                });
            }
        });
    },
    drawStart: function (e) {
        var touch = e.touches[0]
        // var item = e.currentTarget.dataset.item;
        var item = this.data.data[e.currentTarget.dataset.index]
        console.log("drawStart-item",item);
        this.setData({
            // data: this.data.data,
            startX: touch.clientX,
            startY: touch.clientY
        })
        if(item.right>=this.data.delBtnWidth){
            return false;
        }
        this.data.data.forEach((item1)=>{
            item1.right = 0
        });
    },
    drawMove: function (e) {
        var touch = e.touches[0]
        var item = this.data.data[e.currentTarget.dataset.index]
        // var item = e.currentTarget.dataset.item;
        console.log('item', item)
        var disX = this.data.startX - touch.clientX;
        var disY = this.data.startY - touch.clientY;
        //若是向上滑動的距離大於向左滑動距離,則不會觸發側滑事件
        if(disY > disX){
            console.log('disY --->>>>>', disY)
            item.right = 0;
            return false;
        }
        console.log('disX', disX)
        if (disX >= 20) {
        // if (disX >= 0) {
            if (disX >= this.data.delBtnWidth) {
                item.right = this.data.delBtnWidth
                return false
            }
            // item.right = disX
            item.right = this.data.delBtnWidth
            this.setData({
                isScroll: false,
                data: this.data.data
            })
        } else {
            item.right = 0
            this.setData({
                isScroll: true,
                data: this.data.data
            })
        }
    },
    drawEnd: function (e) {
        var item = this.data.data[e.currentTarget.dataset.index]
        // var item = e.currentTarget.dataset.item;
        if(item.right >= this.data.delBtnWidth){
            item.right = this.data.delBtnWidth
            return false
        }
        if (item.right >= this.data.delBtnWidth/2) {
            item.right = this.data.delBtnWidth
            this.setData({
                isScroll: true,
                data: this.data.data,
            })
        } else {
            item.right = 0
            this.setData({
                isScroll: true,
                data: this.data.data,
            })
        }
    },

    delItem: function (e) {
        console.log('刪除')
    }
})
複製代碼

wxss 代碼

.order-item {
  height: 240rpx;
  width: 100%;
  display: flex;
  position: relative;
  overflow:hidden;
}

.remove{  
  width: 160rpx;  
  height: 100%;  
  background-color: red; 
  color: white; 
  position: absolute;  
  top: 0;  
  right: -160rpx;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}    
參考連接:https://www.jianshu.com/p/f9cc446fd328
複製代碼