微信小程序实现左滑删除效果(原生/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