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
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值