博客

 效果展示：

主要利用两个事件来获取用户的操作的坐标来判断是否左滑，然后删除按钮借助定位来显示隐藏

 事件：

 html代码：

	<view class="list" v-for="(item,index) in personList" :key="item.id" @touchstart="listTouchstart"
				@touchmove="listTouchmove($event,index)">
				<view class="list-content" :style="{left:showDelete&&currentIndex==index?'-100rpx':'0rpx'}">
					<view class="top flex-jus-bet">
						<view class="userName">{{item.userName}}</view>
						<view class="postName">{{item.postName}}</view>
					</view>
					<view class="center">
						<view class="roleName">（{{item.roleName}}）</view>
					</view>
					<view class="bottom flex-jus-bet">
						<view class="deptName">{{item.deptName}}</view>
						<u-tag :text="Number(item.isValid)===1?'是':'否'"
							:type="Number(item.isValid)===1?'primary':'error'" plain></u-tag>
					</view>
				</view>
				<view class="delete-btn" :style="{right:showDelete&&currentIndex==index?'0rpx':'-100rpx'}">
					<view class="delete-text">
						删除
					</view>
				</view>
			</view>

js代码：

//触摸动作开始
			listTouchstart(event) {
				this.start.x = event.touches[0].clientX//起始X坐标
				this.start.y = event.touches[0].clientY//起始Y坐标
			},
			//触摸动作移动事件
			//这里我使用了自己封装的一个防抖函数debounce,来防止事件不不必要的多次触发影响性能
			//注意这里防抖函数的第一个参数别写成箭头函数了
			listTouchmove: debounce(function(event,index) {
                this.currentIndex = index//获取当前操作项
				this.current.x = event.touches[0].clientX//结束X坐标
				this.current.y = event.touches[0].clientY//结束Y坐标
				const startX = Math.round(this.start.x)//四舍五入取整
				const currentX = Math.round(this.current.x)//四舍五入取整
				
				//const startY = Math.round(this.start.y)
				//const currentY = Math.round(this.current.y)
				//const y =  Math.abs(startY-currentY)
				
				if (startX - currentX > 20) {
					//判断起始的差,如果为正则为左滑,如果为负则为右滑,这里判断值为20是为了防止误操作,具体值根据自己的需求来
					//试想以下场景用户往下滑的动作,基本上很难是一条竖直的直线,很大的几率是左斜或者右斜的,这时如果设置大于0,也会触发显示删除按钮,
					//所以需要设置一个阈值需要左滑大于这个值才会显示
					console.log('左滑········')
					this.showDelete = true
				} else if(startX - currentX < -20) {
					//右滑也是同理
					console.log('右滑········')
					this.showDelete = false
				}
			}, 100),

css代码：

	.list {
			position: relative;
			display: flex;
			border-bottom: 1rpx solid #d1d1d1;
			padding: 20rpx;
			box-sizing: border-box;

			.userName {
				font-weight: 600;
			}

			.center {
				padding: 10rpx 0;
				font-size: 25rpx;
				color: #8a8a8a;
			}

			.list-content {
				position: relative;
				width: 100%;
				transition: all 0.3s;//设置一个过渡来使显示隐藏看起来顺滑些
			}

			.delete-btn {
				background-color: #df3448;
				color: #fff;
				width: 100rpx;
				text-align: center;
				height: 100%;
				position: absolute;
				top: 0;
				transition: all 0.3s;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}

注意事项：

代码中我使用了防抖函数，没用过或者没听过的可能会不知道是干啥用的，这个防抖主要是为了防止左滑事件多次触发用的，毕竟左滑事件我们只需要知道起始坐标就行了，所以可以适当优化一下性能，不用防抖也没关系效果一样能出来，防抖函数可以自己手动撸一个，也可以网上找一个现成的，或者使用npm装一个lodash