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

本文分享了在微信小程序中实现左滑动删除功能的详细过程,包括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
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值