实现效果
- 列表中侧滑删除
- 删除不同时存在
- 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:;
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:;
right: -160rpx;
display: flex;
justify-content: center;
align-items: center;
}