效果图:
<template>
<view class="">
<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.self ="delItem">删除</view>
</view>
</block>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
delBtnWidth: 160,
dataList: [
{
content: '1',
right: 0
},{
content: '2',
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];
console.log(touch, 'touch');
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>
<style scoped>
.order-item {
height: 240rpx;
width: 100%;
display: flex;
position: relative;
background-color: #999999;
transition: all 0.2s;
margin-bottom: 50rpx;
}
.remove {
width: 160rpx;
height: 100%;
background-color: red;
color: white;
position: absolute;
top: 0;
right: -160rpx;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
}
</style>
方法二:进入方法一
转载:原文更详细
原文链接:https://blog.csdn.net/weixin_41579185/article/details/117747252?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-117747252-blog-123702049.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-117747252-blog-123702049.pc_relevant_aa&utm_relevant_index=3