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
    评论
uniapp中实现滑动删除功能可以通过以下步骤实现: 1. 首先,在需要实现滑动删除的视图组件中,添加`@touchstart`、`@touchmove`和`@touchend`事件监听器,并在相应的方法中编写逻辑代码。可以参考中提供的代码示例。 2. 在数据部分,定义`startX`和`delBtnWidth`两个变量,`startX`用于记录触摸开始时的X坐标,`delBtnWidth`表示删除按钮的宽度。 3. 在滑动开始(`drawStart`)事件处理方法中,获取触摸开始时的X坐标,可以使用`event.touches.clientX`来获取。 4. 在滑动过程(`drawMove`)事件处理方法中,计算移动的距离,并根据移动的距离来移动视图组件,使其呈现出滑动效果。具体的实现逻辑可以根据需求进行调整。 5. 在滑动结束(`drawEnd`)事件处理方法中,判断滑动的距离是否超过了删除按钮的一半宽度,如果超过了,则执行删除操作;否则,将视图组件恢复原位。 以上是使用原生的手势事件来实现滑动删除功能的方法。另外,uniapp也提供了组件`uni-swipe-action`来方便实现滑动删除效果。可以参考中提供的代码示例来使用`uni-swipe-action`组件实现滑动删除。在`uni-swipe-action`中,可以使用`left-options`和`right-options`来设置左滑和右滑出现的内容,同时可以监听`@change`事件来处理组件的打开或关闭操作。 综上所述,你可以根据需求选择使用原生手势事件或者`uni-swipe-action`组件来实现滑动删除功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【uni-appuniapp如何实现左滑删除以及改造uni-ui中的swiperAction](https://blog.csdn.net/wuguidian1114/article/details/123683506)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [uni-app 实现滑动删除](https://blog.csdn.net/Lsp19980917/article/details/119043549)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值