uniapp 滑动删除

为什么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>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值