微信小程序 - 实现左滑动删除功能

最新推荐文章于 2023-08-14 21:56:04 发布

紫菀檀ss

最新推荐文章于 2023-08-14 21:56:04 发布

阅读量6.3k

点赞数 9

分类专栏：微信小程序

本文链接：https://blog.csdn.net/LiaoFengJi/article/details/105218664

版权

本文分享了在微信小程序中实现左滑动删除功能的详细过程，包括wxml布局、wxss样式和js逻辑。通过使用flex布局和动态设置样式实现滑动效果，代码已上传至GitHub，供读者参考和下载。

摘要由CSDN通过智能技术生成

闲暇时间写一个小程序商城小项目的时候，遇到了左滑删除的功能，经过各种百度研究之后，实现了下图效果，现在分享一下我的实现过程：

效果图：

在这里插入图片描述

实现过程：

一、wxml布局

这里我是先用了一个大盒子包裹小盒子，然后小盒子里面进行左右布局（左边为内容部分，右边为删除按钮）的方式实现的

<!-- 通过 isTouchMove 的值来对应移动位置-->
		<view class="item {
  {item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{
  {dataList}}" wx:key="item.id">
			<view class="item-left" data-index="{
  {index}}" bindtouchstart="touchStart" bindtouchmove="touchMove">
				<view class="icon-check">
					<image src="{
  {noCheck}}"></image>
				</view>
				<view class="imgs">
					<image src="{
  {item.img}}"></image>
				</view>
				<view class="context">
					<view class="title">{
  {item.title}}</view>
					<view class="bottoms">
						<view class="price">￥{
  {item.price}}</view>
						<view class="num">
							<view class="opare">-</view>
							<view class="opare nums">{
  {item.num}}</view>
							<view class="opare">+</view>
						</view>
					</view>
				</view>
			</view>
			<view class="delete" data-id="{
  {item.id}}" bindtap="delItem">删除</view>
		</view>

二、wxss的写法

wxss是用了flex布局，然后让左边的内容部分的宽度占100%，左外边距为删除按钮的宽度，右边设置固定宽度，通过动画的方式将右边的删除按钮往右偏移删除按钮的宽度，使之看不到，最后通过动态设置 .touch-move-active 实现滑动效果。

.item {
  display: flex;
}

/* 除删除按钮之外的其他部分 */
.item-left {
  /* 关键代码 start */
  width: 100%;
  margin-left: -140rpx;
  transform: translateX(140rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(140rpx);
  /* 关键代码 end */
}

/* 删除按钮 */
.delete {
  height: 100%;
  width: 140rpx;
  
  /* 关键代码 start */
  transform: translateX(150rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4