为什么h5不加transition: transform .3s ,滑动之后点击不了删除按钮,求解
<template>
<view class="container">
<view class="item-list">
<view class="item" v-for="(item, index) in items" :key="index" @touchstart="touchStart" @touchend="touchEnd"
:data-index="index">
<view class="item-content" :style="{transform: 'translateX(' + item.left + 'px)'}">{{ item.content }}
</view>
<view class="delete-btn" @click="deleteItem(index)">删除</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [{
content: '地址111111111111111',
left: 0
},
{
content: '地址2222222222222222',
left: 0
},
{
content: '地址3333333333333333',
left: 0
},
// 更多地址...
],
startX: 0,
itemIndex: 0,
}
},
onLoad() {
},
methods: {
touchStart(e) {
this.startX = e.touches[0].clientX;
this.itemIndex = e.currentTarget.dataset.index;
this.items.forEach((item, index) => {
if (index == this.itemIndex) {
return
}
item.left = 0
})
},
touchEnd(e) {
let left = e.changedTouches[0].clientX - this.startX;
if (left < -20) {
this.items[this.itemIndex].left = -50;
} else {
this.items[this.itemIndex].left = 0;
}
},
deleteItem(index) {
this.items.splice(index, 1);
}
}
}
</script>
<style>
.container {
box-sizing: border-box;
padding: 0 20rpx;
width: 100%;
height: 100%;
}
.item-list {
width: 100%;
}
.item {
border-radius: 20rpx;
overflow: hidden;
margin-top: 20rpx;
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
}
.item-content {
transition: transform .3s;
position: relative;
z-index: 99;
background-color: skyblue;
width: 100%;
height: 100%;
}
.delete-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
line-height: 50px;
background-color: #f00;
color: #fff;
text-align: center;
}
</style>