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

效果图：

实现过程：

一、wxml布局

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

<view class="cart"><view class="content"><!-- 通过 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></view><view class="footer"></view>
</view>

二、wxss的写法

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

.cart {width: 100%;height: 100%;box-sizing: border-box;
}.item {margin-bottom: 15rpx;background-color: #fff;padding: 20rpx 10rpx;padding-right: 0;display: flex;box-sizing: border-box;height: 220rpx;
}/* 除删除按钮之外的其他部分 */
.item-left {display: flex;justify-content: start;align-items: center;/* 关键代码 start */width: 100%;margin-left: -140rpx;transform: translateX(140rpx);-webkit-transition: all 0.4s;transition: all 0.4s;-webkit-transform: translateX(140rpx);/* 关键代码 end */
}.item-left .icon-check {width: 80rpx;height: 80rpx;display: flex;justify-content: center;align-items: center;
}.icon-check image {width: 45rpx;height: 45rpx;display: block;
}.imgs {width: 200rpx;height: 200rpx;display: flex;justify-content: center;align-items: center;
}.imgs image {width: 200rpx;height: 200rpx;display: block;
}.context {padding-left: 20rpx;
}.context .title {color: #333;font-size: 34rpx;
}.context .bottoms {display: flex;padding-top: 20rpx;
}.bottoms .price {width: 36rpx;color: #FD5761;padding-right: 100rpx;display: flex;justify-content: center;align-items: center;
}.bottoms .num {display: flex;justify-content: start;align-items: center;
}.bottoms .num .opare {padding: 10rpx 24rpx;border: 1rpx solid #ccc;
}.num .nums {margin: 0 10rpx;
}/* 删除按钮 */
.delete {height: 100%;width: 140rpx;background-color: rgb(241, 81, 81);display: flex;justify-content: center;align-items: center;font-size: 36rpx;color: #fff;/* 关键代码 start */transform: translateX(150rpx);-webkit-transition: all 0.4s;transition: all 0.4s;-webkit-transform: translateX(150rpx);/* 关键代码 end */
}/* 关键代码 start --> 向左滑动 */
.touch-move-active .item-left,
.touch-move-active .delete {-webkit-transform: translateX(0);transform: translateX(0);
}
/* 关键代码 end */

三、js的写法

通过小程序自带的touchStart和touchMove实现的，我就不一一解释了，直接上代码（ps:代码中有对应的注释）

// pages/cart/cart.js
Page({/*** 页面的初始数据*/data: {dataList: [{id: 1,img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50649d7b5706f4cd9f658e93db6b6564.jpg?thumb=1&w=200&h=200&f=webp&q=90",title: "小米真无线蓝牙耳机 Air 2",price: 278,num: 1,isTouchMove: false, //默认隐藏删除checked: false},{id: 2,img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/321610e787393c42e5cb2e5730a7681d.jpg?thumb=1&w=200&h=200",title: "小米小爱蓝牙音箱 随身版",price: 49,num: 1,isTouchMove: false, //默认隐藏删除checked: false},{id: 3,img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f32af53d1ad60f4980146f6a2b81019.jpg?thumb=1&w=200&h=200&f=webp&q=90",title: "小米无线充电宝青春版10000mAh",price: 129,num: 1,isTouchMove: false, //默认隐藏删除checked: false},{id: 4,img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c149537ebb0c2cdb977ddd93200074f4.jpg?thumb=1&w=200&h=200&f=webp&q=90",title: "小米旅行箱 20英寸 布朗熊限量版",price: 149,num: 1,isTouchMove: false, //默认隐藏删除checked: false}],// 设置开始的位置startX: 0,startY: 0,},// 开始滑动touchStart(e) {console.log('touchStart=====>', e);let dataList = [...this.data.dataList]dataList.forEach(item => {if (item.isTouchMove) {item.isTouchMove = !item.isTouchMove;}});this.setData({dataList: dataList,startX: e.touches[0].clientX,startY: e.touches[0].clientY})},touchMove(e) {console.log('touchMove=====>', e);let moveX = e.changedTouches[0].clientX;let moveY = e.changedTouches[0].clientY;let indexs = e.currentTarget.dataset.index;let dataList = [...this.data.dataList]let angle = this.angle({X: this.data.startX,Y: this.data.startY}, {X: moveX,Y: moveY});dataList.forEach((item, index) => {item.isTouchMove = false;// 如果滑动的角度大于30° 则直接return；if (angle > 30) {return}if (indexs === index) {if (moveX > this.data.startX) { // 右滑item.isTouchMove = false;} else { // 左滑item.isTouchMove = true;}}})this.setData({dataList})},/*** 计算滑动角度* @param {Object} start 起点坐标* @param {Object} end 终点坐标*/angle: function (start, end) {var _X = end.X - start.X,_Y = end.Y - start.Y//返回角度 /Math.atan()返回数字的反正切值return 360 * Math.atan(_Y / _X) / (2 * Math.PI);},// 删除delItem(e) {let id = e.currentTarget.dataset.id;let dataList = [...this.data.dataList];console.log('id--->', id);for (let i = 0; i < dataList.length; i++) {const item = dataList[i];item.isTouchMove = false;if (item.id === id) {dataList.splice(i, 1);break;}}this.setData({dataList})}
})

微信小程序 - 实现左滑动删除功能相关推荐

微信小程序实现左滑删除
wxml代码: <view class="global"><movable-area class="area"><movable- ...
slide-view 微信小程序官方左滑删除组件
github 地址: slide-view 使用方法安装 slide-view npm install --save miniprogram-slide-view 在需要使用 slide-view ...
微信小程序车轮之滑动删除
上效果图(左侧为原车轮效果图) 两天的零散时间弄这么个破玩意~,做梦都在滑有什么问题欢迎指正链接: http://pan.baidu.com/s/1nuRKCpr 密码: dyri
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
前言: 现在很多程序上都有左滑删除的效果,其实实现很简单,今天我们主要来记录一下小程序的左滑删除的实现过程. 效果图: 实现效果: 当我们在该条记录上进行左滑操作时,整条记录跟着向左移动,同时右侧的删 ...
微信小程序运动步数java_微信小程序实现运动步数排行功能（可删除）
效果图如下所示: wxml {{item.rank}} {{item.name}} {{item.pace}} 删除 wxss /* pages/leftSwiperDel/index.wxss */ ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...

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

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

效果图：

实现过程：

一、wxml布局

二、wxss的写法

三、js的写法

微信小程序 - 实现左滑动删除功能相关推荐

最新文章

热门文章