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
复制代码