uniapp上实现一个左滑显示删除按钮,右滑删除按钮消失

功能需求

产品提出来需要实现左滑动特定的一项,来显示删除按钮,用户右滑动隐藏删除按钮(ps:没用原生的是因为样式与视觉给的不符合,不如自己设计一个)

具体功能实现

1. html部分

<template>
   <view class="content">
   	<view class="container" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :style="{left: leftStyle + 'rpx'}">
   		<view>
   			lalalallalal
   		</view>
   		<view class="delete-icon">
   			删除
   		</view>
   	</view>
   </view>
</template>

核心功能逻辑:修改leftStyle的值使container进行滑动
2. js部分

export default {
   
	    data() {
   
			return {
   
				leftStyle: 0,
				startX: 0,
				hiddenFlag: true, 
				delBtnWidth: 220
如果你想实现一个Uniapp 中的循环动操作,删除其中一个列表项的功能,你可以使用 Uniapp 提供的 `swiper` 组件和 `uni-swipe-action` 组件来实现。 首先,你可以用 `swiper` 组件来实现列表项的循环动。具体来说,你可以在 `swiper` 组件中嵌套一个 `scroll-view` 组件,并将其 `scroll-x` 属性设置为 `true`,这样就可以实现一个可以横向动的列表。 接下来,你可以在每个列表项中嵌套一个 `uni-swipe-action` 组件,用于实现删除功能。具体来说,你可以在 `uni-swipe-action` 组件中包含一个 `view` 子组件,用于显示列表项的内容,以及一个 `action` 子组件,用于显示删除按钮。当用户列表项时,`uni-swipe-action` 组件会自动显示删除按钮,用户点击删除按钮后,你可以在相应的事件处理函数中删除对应的列表项。 示例代码如下: ```html <swiper :autoplay="false" :circular="true" :duration="500" :interval="3000" class="swiper"> <swiper-item v-for="(item, index) in list" :key="index"> <uni-swipe-action @delete="deleteItem(index)"> <view class="item">{{ item }}</view> <view class="action">删除</view> </uni-swipe-action> </swiper-item> </swiper> ``` ```javascript export default { data() { return { list: ["列表项1", "列表项2", "列表项3", "列表项4"], }; }, methods: { deleteItem(index) { this.list.splice(index, 1); }, }, }; ``` 需要注意的是,以上代码仅为示例代码,具体实现方式可能因需求而异,你需要根据实际情况进行调整。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值