效果

图片

WXML

<view class="container"><!-- 收货地址 --><view class="address"><view class="left"><view class="icon"><image src="../../images/address.png"></image></view><view class="txt-wrap"><view class="txt">北京市朝阳区SOLANA蓝色港湾</view></view></view><view class="right"><view class="line"></view><view class="txt">编辑</view></view></view><view class="list"><view class="item" wx:for="{{list}}" wx:key="index"><!-- 商品头部信息 --><view class="head"><view class="head-icon" bindtap="selectItem" data-index="{{index}}"><image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image></view><view class="from"><view class="left"><view class="storeImg"><image src="../../images/store.png"></image></view><view class="storeName">{{item.storeName}}</view><view class="arrow"><image src="../../images/arrow.png"></image></view></view><view class="right"><view class="freight">已免运费</view><view class="coupon">优惠券</view></view></view></view><!-- 商品内容信息 --><view class="cont"><view class="wrap"bindtouchstart="touchStart"bindtouchmove="touchMove"data-index="{{index}}"style="left: -{{item.x}}rpx" /><view class="cont-icon"><view class="img-wrap" bindtap="selectItem" data-index="{{index}}"><image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image></view><view class="img"><image src="{{item.imgUrl}}"></image></view></view><view class="info"><view class="name">{{item.name}}</view><view class="specs-wrap"><view class="specs">{{item.specs}}</view></view><view class="discount-wrap"><view class="discount">{{item.discount}}</view></view><view class="price-wrap"><view class="price"><text>￥</text>{{item.price}}<text>.00</text></view><view class="num"><view class="reduce" bindtap="reduce" data-index="{{index}}">-</view><input class="inp" type="number"value="{{item.num}}"maxlength="4"bindinput="bindNumInput"bindblur="bindNumBlur"data-index="{{index}}"/><view class="add" bindtap="add" data-index="{{index}}">+</view></view></view></view><!-- 商品右滑删除按钮 --><view class="del" bindtap="delete" data-index="{{index}}">删除</view></view></view></view></view><!-- 全选、总计、结算 --><view class="total"><view class="total-icon" bindtap="allSelect"><view class="img"><image src="{{selectAll ? '../../images/select.png' : '../../images/no-select.png'}}"></image></view><text style="font-size: 26rpx;">全选</text></view><view class="settle"><view class="price">总计<text style="margin: 0 4rpx;">:</text><text style="font-size: 30rpx;font-weight: 800;">¥{{totalPrice}}</text></view><view class="btn" wx:if="{{totalNum > 0}}">去结算<text style="margin-left: 4rpx;">({{totalNum}})</text></view><view class="btn" wx:else>去结算<text style="margin-left: 4rpx;">(0)</text></view></view></view>
</view>

JS

Page({/*** 页面的初始数据*/data: {list: [{id: 1, name: 'Apple/苹果 15.4英寸2.2GHz MacBook Pro 256G四核i7处理器256G手提电脑笔记本电脑商务办公学生学习家用电脑',imgUrl: '../../images/0.png',storeName: '哇塞官方旗舰店',specs: '现货 5788灰 十代i7/16G/1T/6G独立显卡',discount: '满3000享换购',num: 1,price: '11999'},{ id: 2, name: 'Apple/苹果 13 英寸 MacBook Pro 1.4GHz 4 核处理器 (Turbo Boost 最高可达 3.9GHz) 256GB 存储容量 触控栏和触控 ID',imgUrl: '../../images/1.png', storeName: '哇塞官方旗舰店',specs: '现货 5749白 十代i7/16G/1T',discount: '满3000享换购',num: 1,price: '11245', },{ id: 3, name: 'Apple/苹果 13 英寸 MacBook Air 1.1GHz 双核 Core i3 处理器，Turbo Boost 最高可达 3.2GHz 256GB 存储容量 触控 ID', imgUrl: '../../images/2.png',storeName: '哇塞官方旗舰店',specs: '现货 九代i7/16G/1T/4G独立显卡',discount: '满3000享换购',num: 1,price: '9245'},{ id: 4, name: 'Apple/苹果 13 英寸 MacBook Pro 1.4GHz 4 核处理器 (Turbo Boost 最高可达 3.9GHz) 512GB 存储容量 触控栏和触控 ID', imgUrl: '../../images/3.png',storeName: '哇塞官方旗舰店',specs: '现货 i7/500G/集成显卡',discount: '满3000享换购',num: 1,price: '11499'},{ id: 5, name: '【原封正品】20款 Apple/苹果 13.3英寸MacBook Pro 512G笔记本电脑带触控栏ID 轻薄便携商务办公笔记本电脑', imgUrl: '../../images/4.png',storeName: '哇塞官方旗舰店',specs: '现货 5746白 i5/8G/500G/集成显卡',discount: '满3000享换购',num: 1,price: '14499'}],selectAll: false, // 是否全选totalNum: 0, // 已选中的商品总数量totalPrice: 0, // 已选中的商品总价格startX: 0, // 手指触摸的初始X轴坐标startY: 0 // 手指触摸的初始Y轴坐标},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.data.list.forEach((item)=> {item.flag = false // 是否已选中商品的依据字段item.x = 0 // 每个列表项的相对定位的初始位置})},// 单个商品选中，计算已选中的商品总价格selectItem(e) {let index = e.currentTarget.dataset.indexlet flag = this.data.list[index].flagif(flag == false) {this.data.list[index].flag = true} else {this.data.list[index].flag = false}// 判断是否全部选中了let bool = this.data.list.every((item) => {return item.flag})this.setData({selectAll: bool,list: this.data.list})this.countPrice()},// 减少数量，计算已选中的商品总价格reduce(e) {let index = e.currentTarget.dataset.indexlet num = this.data.list[index].num// 判断当前商品的数量是否大于1，大于1则可以进行减少操作if(num > 1) {this.data.list[index].num = num - 1}this.setData({list: this.data.list})this.countPrice()},// 输入数量bindNumInput(e) {let val = e.detail.valuelet index = e.currentTarget.dataset.indexif(Number(val) == 0) {this.data.list[index].num = 1} else {this.data.list[index].num = Number(val)}},// 失去焦点，计算已选中的商品总价格bindNumBlur() {this.setData({list: this.data.list})this.countPrice()},// 增加商品数量，计算已选中的商品总价格add(e) {let index = e.currentTarget.dataset.indexlet num = this.data.list[index].numthis.data.list[index].num = num + 1this.setData({list: this.data.list})this.countPrice()},// 手指触摸的起始坐标touchStart(e) {this.data.startX = e.touches[0].clientX;this.data.startY = e.touches[0].clientY;},// 滑动列表项touchMove(e) {let index = e.currentTarget.dataset.index// 获得当前坐标let currentX = e.touches[0].clientX;let currentY = e.touches[0].clientY;let x = this.data.startX - currentX; //横向移动距离let y = Math.abs(this.data.startY - currentY); //纵向移动距离，若向左移动有点倾斜也可以接受if (x > 35 && y < 110) {// 向左滑是显示删除this.data.list[index].x = 110; this.setData({list:  this.data.list})} else if (x < -35 && y < 110) {// 向右滑this.data.list[index].x = 0; this.setData({list:  this.data.list})}},// 删除列表项，重新计算总价格和全选状态delete(e) {let index = e.currentTarget.dataset.indexthis.data.list.splice(index, 1)this.setData({list: this.data.list})this.countPrice()},// 全选allSelect() {// 判断是否已经全选，是就全部取消选中，否则全部选中，之后计算总价格if(this.data.selectAll) {this.data.list.forEach((item)=>{item.flag = false})this.data.selectAll = false} else {this.data.list.forEach((item)=>{item.flag = true})this.data.selectAll = true}this.setData({selectAll: this.data.selectAll,list: this.data.list})this.countPrice()},// 计算已选中的总价格countPrice() {// 判断是否有已选中的商品，有则进行计算，没有则清除全选状态，总价格，结算的商品数量let bool = this.data.list.some((item) => {return item.flag})if(bool) {// 每次重新计算时，先把上一次记录的数据清空this.data.totalNum = 0 this.data.totalPrice = 0this.data.list.forEach((item)=>{if(item.flag == true) {this.data.totalPrice += (item.price * item.num)this.data.totalNum += item.num}})} else {this.data.totalNum = 0this.data.totalPrice = 0this.data.selectAll = false}this.setData({totalNum: this.data.totalNum,totalPrice: this.data.totalPrice,selectAll: this.data.selectAll})}
})

WXSS

page {background: #f2f2f2;
}
.container {width: 100%;padding-bottom: 90rpx;box-sizing: border-box;overflow-y: scroll;
}
.address {width: 100%;height: 80rpx;background: #fff;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;padding: 0 30rpx;box-sizing: border-box;font-size: 28rpx;display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;
}
.address .left {flex: 1;display: flex;align-items: center;
}
.address .left .icon {width: 32rpx;height: 35rpx;margin-right: 8rpx;
}
.address .left .icon image {width: 100%;height: 100%;
}
.address .left .txt-wrap {width: 0;flex: 1;
}
.address .left .txt-wrap .txt {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 10rpx;box-sizing: border-box;
}
.address .right {width: 80rpx;display: flex;align-items: center;
}
.address .right .line {width: 0rpx;height: 26rpx;border-left: 4rpx solid #bfbfbf;
}
.address .right .txt {flex: 1;text-align: right;
}.list {width: 100%;
}
.list .item {width: 100%;border-radius: 20rpx;padding: 30rpx 0;box-sizing: border-box;background: #ffffff;margin-bottom: 20rpx;
}/* 商品头部信息 */
.list .item .head {width: 100%;font-size: 26rpx;padding: 0 30rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 20rpx;
}
/* 商品选中图标 */
.list .item .head .head-icon {width: 40rpx;height: 40rpx;margin-right: 26rpx;border-radius: 100%;box-shadow: 0 0 10rpx lightgray;
}
.list .item .head .head-icon image {width: 100%;height: 100%;
}
.list .item .head .from {flex: 1;display: flex;align-items: center;justify-content: space-between;
}
.list .item .head .from .left {display: flex;align-items: center;
}
.list .item .head .from .left .storeImg {width: 26rpx;height: 26rpx;margin-top: -4rpx;margin-right: 8rpx;
}
.list .item .head .from .left .storeImg image {width: 100%;height: 100%;
}
/* 店铺名称 */
.list .item .head .from .left .storeName {flex: 1;margin-right: 14rpx;
}
/* 右箭头 */
.list .item .head .from .left .arrow {width: 8rpx;height: 34rpx;display: flex;align-items: center;
}
.list .item .head .from .left .arrow image {width: 100%;height: 16rpx;
.list .item .head .from .right {display: flex;align-items: center;justify-content: flex-end;
}
/* 免运费 */
.list .item .head .from .right .freight {font-size: 22rpx;color: #1e1e1e;
}
/* 优惠券 */
.list .item .head .from .right .coupon {font-size: 24rpx;padding: 4rpx 14rpx;background: #ffeded;border-radius: 20rpx;margin-left: 16rpx;color: #ffaa7f;
}/* 商品信息 */
.list .item .cont {width: 100%;overflow: hidden;font-size: 26rpx;
}
.list .item .cont .wrap {width: 100%;padding: 0 30rpx;box-sizing: border-box;display: flex;justify-content: flex-start;transition: all 0.2s;position: relative;top: 0;left: 0;
}
/* 商品油滑的删除按钮 */
.list .item .cont .wrap .del {width: 110rpx;height: 100%;background: #ffaa7f;font-size: 24rpx;color: #fff;display: flex;justify-content: center;align-items: center;position: absolute;top: 0;right: -110rpx;
}
.list .item .cont .wrap .cont-icon {display: flex;margin-right: 26rpx;
}
/* 商品选中或未选中图标 */
.list .item .cont .wrap .cont-icon .img-wrap {width: 40rpx;height: 40rpx;margin-right: 26rpx;border-radius: 100%;box-shadow: 0 0 10rpx lightgray;position: relative;top: 72rpx;left: 0;
}
.list .item .cont .wrap .cont-icon .img-wrap image {width: 100%;height: 100%;
}
/* 商品图片 */
.list .item .cont .wrap .cont-icon .img {width: 190rpx;height: 190rpx;border-radius: 10rpx;box-shadow: 0 0 10rpx lightgray;overflow: hidden;
}
.list .item .cont .wrap .cont-icon .img image {width: 100%;height: 100%;
}
.list .item .cont .wrap .info {flex: 1;width: 0;
}
/* 商品名称 */
.list .item .cont .wrap .info .name {overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom: 10rpx;
}
/* 商品规格 */
.list .item .cont .wrap .info .specs-wrap {width: 100%;font-size: 24rpx;padding-right: 12rpx;border-radius: 18rpx;box-sizing: border-box;margin-bottom: 8rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.list .item .cont .wrap .info .specs-wrap .specs {display: inline-block;background: #f2f2f2;border-radius: 18rpx;padding: 4rpx 16rpx 4rpx 16rpx;box-sizing: border-box;
}
/* 商品优惠 */
.list .item .wrap .wrap .cont .info .discount-wrap {width: 100%;font-size: 24rpx;
}
.list .item .cont .wrap .info .discount-wrap .discount {display: inline-block;background: #f2f2f2;border-radius: 18rpx;padding: 4rpx 20rpx 4rpx 16rpx;box-sizing: border-box;
}
/* 商品价格 */
.list .item .cont .wrap .info .price-wrap {display: flex;align-items: center;justify-content: space-between;margin-top: 8rpx;
}
.list .item .cont .wrap .info .price-wrap .price {font-size: 36rpx;font-weight: 700;color: #ffaa7f;
}
.list .item .cont .wrap .info .price-wrap .price text {font-size: 24rpx;
}
/* 商品数量 */
.list .item .cont .wrap .info .price-wrap .num {display: flex;align-items: center;justify-content: flex-end;
}
.list .item .cont .wrap .info .price-wrap .num .reduce {width: 40rpx;font-weight: 800;color: #262626;text-align: center;line-height: 40rpx;
}
.list .item .cont .wrap .info .price-wrap .num .inp {width: 80rpx;height: 40rpx;min-height: 40rpx;text-align: center;background: #f2f2f2;margin: 0 2rpx;
}
.list .item .cont .wrap .info .price-wrap .num .add {width: 40rpx;font-weight: 800;color: #262626;text-align: center;line-height: 40rpx;
}/* 全选、总计、结算 */
.total {width: 100%;height: 90rpx;background: #fff;padding: 0 20rpx 0 30rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: space-between;position: fixed;left: 0;bottom: 0;z-index: 99;
}
.total .total-icon {display: flex;align-items: center;justify-content: flex-start;
}
.total .total-icon .img {width: 40rpx;height: 40rpx;margin-right: 14rpx;border-radius: 100%;box-shadow: 0 0 10rpx lightgray;
}
.total .total-icon image {width: 100%;height: 100%;
}
.total .settle {font-size: 24rpx;display: flex;align-items: center;justify-content: flex-end;
}
.total .settle .price {display: flex;align-items: center;margin-right: 16rpx;
}
.total .settle .btn {height: 60rpx;background: #ffaa7f;border-radius: 30rpx;padding: 0 30rpx;box-sizing: border-box;font-size: 24rpx;color: #fff;display: flex;align-items: center;justify-content: center;
}

微信小程序实现列表项左滑删除效果相关推荐

微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
前言: 现在很多程序上都有左滑删除的效果,其实实现很简单,今天我们主要来记录一下小程序的左滑删除的实现过程. 效果图: 实现效果: 当我们在该条记录上进行左滑操作时,整条记录跟着向左移动,同时右侧的删 ...
小程序uniapp实现左滑删除效果
小程序uniapp实现左滑删除效果实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 < ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序多级列表绑定
微信小程序多级列表绑定 1.wxml <view class="weui-form-preview margin-bottom" wx:key="" wx ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...

微信小程序实现列表项左滑删除效果

效果

图片

WXML

JS

WXSS

微信小程序实现列表项左滑删除效果相关推荐

最新文章

热门文章