小程序购物车优化全选，反选，单选控制价格等
2024-05-13 01:20:14
有需求的可以直接复制看看，几乎都会有注释
<!--pages/map/map.wxml-->
<view class='container'><!-- 加入的商品列表 --><view class="addGoodsList"><view class="titTop"><view class="topLeft"><image bindtap="checkBtn" src="{{checked==true?'http://pics.jiuziran.com/FuxcLrK9xqVgbhbZPtqknbFW1v5K':'http://pics.jiuziran.com/FoMPtL4s9fwsN0EJvvHVIAAJna9Q'}}"></image> <image class="tXiang" src="http://pics.jiuziran.com/@//@wine_Com_Img_size:500/500/1568130900259"></image> <text>酒闪送<text>（顺昌城内）</text></text></view><view class="topRight"><text class="wholeTwo">编辑</text></view></view><view class="containBottom" wx:for="{{goodsList}}" wx:key="{{index}}" data-index="{{index}}"><image class="wImg" catchtap="checkBtnOne" data-index="{{index}}" src="{{item.checkedOne==true?'http://pics.jiuziran.com/FuxcLrK9xqVgbhbZPtqknbFW1v5K':'http://pics.jiuziran.com/FoMPtL4s9fwsN0EJvvHVIAAJna9Q'}}"></image><view class="goodsBox goodsBoxTwo"><view class="godLst"><image class="gImg" src="http://pics.jiuziran.com/@//@wine_Com_Img_size:500/500/1568130900259"></image><view class="goodsList goodsListTwo"><text class="gTitle ">{{item.title}}</text><view class="goodsNumber"><view class="godL"><text class="zpri">¥<text class="pri">{{item.prOne}}</text></text> <text class="pri2">{{item.prTwo}}</text></view><view class="num"><image class="numImg1" bindtap="jianBtn" data-index="{{index}}" src="http://pics.jiuziran.com/Fqe7zzfze4RMeby12JlJ7iw4epGP"></image><text>{{item.num}}</text><image class="numImg2" bindtap="jiaBtn" data-index="{{index}}" src="http://pics.jiuziran.com/Fvhl1bsFLqYQMFViY2tSNm_5diTk"></image></view></view></view></view></view></view></view><!-- 加入购物车 --><view class="btnBox"><view class="Zprice"><text>¥{{price}}</text><text>含运费20元</text></view><text class="btn2">去结算</text></view><!-- 未加入购物车 --><!-- <view class="btnBox"><view class="Zprice ZpriceTwo"><text>购物车是空的</text></view><text class="btn2 needBtn">差20元起送</text><image class="gwcTwo" src="http://pics.jiuziran.com/FkYDvmvYdm09tiMW5hWon6XFLcV2"></image></view> -->
</view>Page({/*** 页面的初始数据*/data: {checked: true,//全选状态count:'',//加入购物车数量price:0,//总价钱goodsList:[],goodsList:[{ title:'盛堡小麦白德国啤酒德国啤',prOne:22.5,prTwo:22.5,checkedOne: true,num: 0},{title: '盛堡小麦白德国啤酒德国啤',prOne: 22.5,prTwo: 22.5,checkedOne: true,num: 0},{title: '盛堡小麦白德国啤酒德国啤',prOne: 22.5,prTwo: 22.5,checkedOne: true,num: 0},],},// 全选checkBtn: function (e) {var that = this// 全选ICON默认选中let checked = this.data.checked;// true ----- falsechecked = !checked;// 获取商品数据let goodsList = this.data.goodsList;// 循环遍历判断列表中的数据是否选中for (let i = 0; i < goodsList.length; i++) {goodsList[i].checkedOne = checked;}// 页面重新渲染this.setData({checked: checked,goodsList: goodsList});this.zPrice()},// 单选checkBtnOne:function(e){var that = this;// 获取选中的单选框索引var index = e.currentTarget.dataset.index;// 获取到商品列表数据var goodsList = that.data.goodsList;// 默认全选that.data.checked = true;// 循环数组数据，判断----选中/未选中[selected]goodsList[index].checkedOne = !goodsList[index].checkedOne;// 如果数组数据全部为selected[true],全选for (var i = goodsList.length - 1; i >= 0; i--) {if (!goodsList[i].checkedOne) {that.data.checked = false;break;}}// 重新渲染数据that.setData({goodsList: goodsList,checked: that.data.checked})this.zPrice()},// 加数量jiaBtn: function (e){var that=thislet index = e.currentTarget.dataset.indexlet goodsList=that.data.goodsListlet num = that.data.goodsList[index].numnum=num+1goodsList[index].num=numconsole.log(that.data.goodsList[index].num)that.setData({goodsList: goodsList,addGoods: true,addGooding: false,})this.zPrice()},//减数量jianBtn: function (e) {var that = thislet index=e.currentTarget.dataset.indexlet goodsList=that.data.goodsListlet num =goodsList[index].numif (num<=0){return false;}num = num - 1goodsList[index].num = numthat.setData({goodsList: goodsList,count: that.data.goodsList[index].num,})this.zPrice()},// 计算总价zPrice(){var that = thislet goodsList=that.data.goodsList;var prc = 0;for (let i = 0; i < goodsList.length; i++) {if (goodsList[i].checkedOne){prc += goodsList[i].num * goodsList[i].prOne;}}that.setData({goodsList: goodsList,price: prc,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {// var that = this// var prc=0;// for (let i = 0; i < that.data.goodsList.length; i++) {// var money = that.data.goodsList[i].prOne;// var cot = that.data.goodsList[i].num;// prc += money * cot;// }// that.setData({// price: prc,// })},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
/*隐藏滚动条*/
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}
/* pages/map/map.wxss */
page{background: #fff;
}
/* 商品 */
.goodsBox{display: flex;padding-top: 30rpx;box-sizing: border-box;
}
.godLst{width: 100%;display: flex;border-bottom: 1px solid #EEEEEE;margin: auto 24rpx 32rpx;
}
.goodsBox image{width: 178rpx;height: 168rpx;margin:0 20rpx 30rpx 0rpx;
}
.goodsList{width: 320rpx;
}
.goodsList .g1{width: 320rpx;height: 32rpx;font-family: PingFangSC-Medium;font-size: 32rpx;color: #333333;line-height: 32rpx;font-weight: 600;display: flex;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */-webkit-box-orient: vertical; /* 垂直排列 */word-break: break-all; /* 内容自动换行 */
}
.goodsList .g2{display: flex;align-items: center;justify-content: center;width: 136rpx;height: 32rpx;background: #F6F6F6;font-family: PingFangSC-Regular;font-size: 20rpx;color: #2B2B2B;line-height: 20rpx;margin:18rpx 0 22rpx 0;
}
.goodsList .g3{font-family: PingFangSC-Regular;font-size: 20rpx;color: #999999;letter-spacing: 0;text-align: justify;line-height: 20rpx;display: flex;margin-bottom: 16rpx;}.goodsNumber{display: flex; justify-content: space-between;/* margin-top: 16rpx; */}.godL{display: flex;}
.goodsNumber .zpri{font-family: PingFangSC-Medium;font-size: 24rpx;color: #FF5C4D;letter-spacing: 0;text-align: justify;line-height: 36rpx;margin-right: 14.2rpx;}
.goodsNumber .pri{font-family: PingFangSC-Medium;font-size: 32rpx;color: #FF5C4D;letter-spacing: 0;text-align: justify;line-height: 36rpx;}.goodsNumber .pri2{font-family: PingFangSC-Regular;font-size: 20rpx;color: #999999;letter-spacing: 0;text-align: justify;line-height: 40rpx;text-decoration: line-through;}.num{display: flex;justify-content: center;}
.num text{font-family: PingFangSC-Regular;font-size: 28rpx;color: #2B2B2B;line-height: 48rpx;margin:0 24rpx;}
.num .numImg1,.num .numImg2{width: 48rpx;height: 48rpx;margin: 0;}.num .numImg2{}
/* 底部按钮 */
.btnBox{width:100% ;height:98rpx;display: flex;position: fixed;bottom: 0;z-index: 60;
}
.Zprice{width: 470rpx;height:98rpx; background: #544F4F;display: flex;flex-direction: column;justify-content: center;padding-left: 32rpx;box-sizing: border-box;
}
.Zprice text:first-child{font-family: PingFangSC-Medium;font-size: 32rpx;color: #FFFFFF;letter-spacing: 0;line-height: 32rpx;margin-bottom: 8rpx;
}
.Zprice text:last-child{font-family: PingFangSC-Regular;font-size: 20rpx;color: #999999;letter-spacing: 0;text-align: justify;line-height: 20rpx;
}
.btn2{width: 280rpx;height:98rpx; background-image: linear-gradient(90deg, #FF4F4F 0%, #FF8644 100%);font-family: PingFangSC-Medium;font-size: 32rpx;color: #FFFFFF;letter-spacing: 0;text-align: center;line-height: 32rpx;display: flex;justify-content: center;align-items: center;
}
.gwc,.gwcTwo {width: 96rpx;height: 96rpx;position: fixed;bottom: 28rpx;left: 24rpx;z-index: 120;
}
.addNumber{width: 32rpx;height: 32rpx;display: flex;align-self: center;justify-content: center;position: fixed;bottom: 96rpx;left: 84rpx;z-index: 121;background: #FFDF3F;border-radius: 7.5px;font-family: PingFangSC-Medium;font-size: 24rpx;color: #2B2B2B;line-height: 24rpx;
}
/* 未加入购物车 */
.needBtn{background: #686868 !important;
}
.ZpriceTwo text,.needBtn{font-family: PingFangSC-Medium !important;font-size: 32rpx !important;color: #FFFFFF !important;letter-spacing: 0 !important;line-height: 32rpx !important;
}
/*加入的商品列表 */
.addGoodsList{width: 100%;height: 480rpx;background: #FFFFFF;
}
.titTop{height: 98rpx;border-bottom: 1px solid #EEEEEE;display: flex;align-items: center;justify-content: space-between;padding: 0 32rpx;box-sizing: border-box;
}
.topLeft,.topRight{display: flex;align-items: center;
}
.topLeft image,.topRight image,.wImg{width: 32rpx;height: 32rpx;margin-right: 20rpx;
}
.titTop .tXiang{width: 48rpx !important;height: 48rpx !important;margin-right: 16rpx !important;
}
.topLeft text,.topRight text{font-family: PingFangSC-Regular;font-size: 32rpx;color: #2B2B2B;text-align: center;line-height: 32rpx;
}
.topRight .wholeTwo{font-family: PingFangSC-Regular;font-size: 28rpx;color: #666666;text-align: right;line-height: 28rpx;
}
.containBottom{width: 100%;display: flex;align-items: center;padding: 0 0 0 32rpx;box-sizing: border-box;
}
.goodsBoxTwo{width: 670rpx !important;height: 164rpx;padding-top: 16.6rpx !important;
}
.goodsBoxTwo .gTitle{display: flex;width: 384rpx !important;height: 32rpx ;font-family: PingFangSC-Medium ;font-size: 32rpx ;color: #333333 ;line-height: 32rpx ;margin:32rpx 0 24rpx 0;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */-webkit-box-orient: vertical; /* 垂直排列 */word-break: break-all; /* 内容自动换行 */
}
.goodsBoxTwo .gImg{width: 136.8rpx;height: 130.6rpx;
}
.goodsListTwo{width: 460rpx !important;
}小程序购物车优化全选，反选，单选控制价格等相关推荐
- 微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选 微信小程序checkbox的全选以及所有checkbox选中之后的全选 第一次写,软件都不懂,直接把代码拷过来了 模板 WXML ...
- 微信小程序功能：全选和反选--修改商品数量、删除商品--计算总价格和总数量--收货地址
微信小程序–购物车页面(核心) 包含功能点: 全选和反选 计算:总价格和总数量 修改商品数量.删除商品 收货地址 结构:cart.wxml <!-- 收货地址 --> <view c ...
- 小程序全套购物车（全选，单选，反选，删除，价格计算）
<!-- 最外层视图pages --> <view class="pages"><view wx:if="{{hasList}}" ...
- 微信小程序 筛选侧边栏 全选与反全选
小程序中经常会有筛选侧边栏的按钮,今天用原生小程序实现这一功能. 1.wxml核心代码 <button class="filterBtn" bindtap="tra ...
- js购物车 实现全选 反选 删除...(附图片代码)
要求: 1.实现全选和全部选的功能.当商品被选中时,需要计算选择的商品数量和总计 2实现数量的加一或者减一.当数量改变时,需要重新计算小计:如果该商品 被选中,则需要重新计算商品数量和总计.注意:商品 ...
- 属性动画+购物车+全选反选+选中计算价格+单个删除
效果图 导入依赖 apply plugin: 'com.android.application' android {compileSdkVersion 26 buildToolsVersion &qu ...
- jquery全选/取消全选(反选)/单选操作
使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body><div& ...
- 微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
- uniapp手写 购物车单选 全选 反选
uniapp手写 购物车单选 全选 反选 这里是用图片切换的方法显示没有用到 checkbox 单选 选项 图片判断切换 全选 选项 图片判断切换 这里是用图片切换的方法显示没有用到 checkbox ...
最新文章
- Linux-TCP/IP TIME_WAIT状态原理
- leetcode算法题--字符串转换整数 (atoi)
- php mysql记录用户行为_PHP实现用session来实现记录用户登陆信息
- sonarqube报错解决办法：Caused by: java.io.FileNotFoundException: /opt/sonar/temp/sharedmemory (权限不够)
- oracle 数据 导出 excel 自动分多个文件,从oracle数据库中导出大量数据到excel中为什么自动分成了好几个excel文件《excel表格新手入门》...
- 为何加入了AddType就无法启动Apache
- leetcode 455. 分发饼干（贪心算法）
- 首届中国信息通信大数据大会将于4月20-21日在京召开
- usbserialch340驱动安装失败_CH340驱动|CH340系列USB转串口驱动下载win7/win10 64位 - 欧普软件下载...
- pyinstaller打包py遇到的问题
- java LocalDateTime 加时间，计算两个时间的差
- 物理机安装linux系统
- 懂车帝与蛋蛋订车两大平台对比
- matlab 求矩阵程序设计,MATLAB程序设计教程(2)—MATLAB矩阵及其运算(3)
- python面向对象之面向对象三要素
- 2020算法面经问题汇总
- 斑马条纹是为了驱散舌蝇和马蝇
- 一些文章资料地址记录
- 前端布局实战：三国杀页面布局（下）
- 《神经⽹络与深度学习》-自学笔记01