微信小程序實現左滑刪除效果(原生/uni-app)

實現效果

1. 列表中側滑刪除
2. 刪除不一樣時存在
3. scrollview上下滑動與側滑刪除不影響

 

 

uni-app實現

html部分

<template>
    <scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }">
        <block :key="index" v-for="(item, index) in dataList">
            <view :data-index="index" class="order-item" @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="{ right: item.right + 'rpx' }">
                <view class="content">{{ item.content }}</view>
                <view class="remove" @click="delItem">刪除</view>
            </view>
        </block>
    </scroll-view>
</template>

 

js部分

<script> export default { data() { return { delBtnWidth: 160, dataList: [ { 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.windowHeight = res.windowHeight; } }); }, methods: { drawStart: function(e) { // console.log("drawStart");
            var touch = e.touches[0]; for (var index in this.dataList) { this.dataList[index].right = 0; } this.startX = touch.clientX; }, drawMove: function(e) { var touch = e.touches[0]; var item = this.dataList[e.currentTarget.dataset.index]; var disX = this.startX - touch.clientX; if (disX >= 20) { if (disX > this.delBtnWidth) { disX = this.delBtnWidth; } this.isScroll = false; this.dataList[e.currentTarget.dataset.index].right = disX; } else { this.isScroll = true; this.dataList[e.currentTarget.dataset.index].right = 0; } }, drawEnd: function(e) { var item = this.dataList[e.currentTarget.dataset.index]; if (item.right >= this.delBtnWidth / 2) { this.isScroll = true; this.dataList[e.currentTarget.dataset.index].right = this.delBtnWidth; } else { this.isScroll = true; this.dataList[e.currentTarget.dataset.index].right = 0; } }, delItem() { console.log('刪除'); } } }; </script>

 

css樣式

<style scoped> .order-item { height: 240rpx; width: 100%; display: flex; position: relative;
} .remove { width: 160rpx; height: 100%; background-color: red; color: white; position: absolute; top: 0; right: -160rpx; display: flex; justify-content: center; align-items: center;
} </style>

 

 

小程序原生開發

html部分

<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">
        <view class="content">{{item.content}}</view>
        <view class="remove" bindtap="delItem">刪除 </view>
    </view>
    </block>
</scroll-view>

 

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) { // console.log("drawStart"); 
    var touch = e.touches[0] for(var index in this.data.data) { var item = this.data.data[index] item.right = 0 } this.setData({ data: this.data.data, startX: touch.clientX, }) }, drawMove: function (e) { var touch = e.touches[0] var item = this.data.data[e.currentTarget.dataset.index] var disX = this.data.startX - touch.clientX if (disX >= 20) { if (disX > this.data.delBtnWidth) { disX = this.data.delBtnWidth } item.right = disX 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] 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(e) } })

 

css部分

.order-item { height: 240rpx; width: 100%; display: flex; position: relative;
} .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