小程序购物车优化全选，反选，单选控制价格等
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 ...
最新文章
- 技术图文：双指针在求解算法题中的应用
- 为什么有的人还不到三十岁，就对工作失去了兴趣呢？
- Serlvet学习笔记之四—对文件的操作
- linux 与 window 对比式理解与应用
- 中国python之父是谁-Python之父：我们能为中国的“996”程序员做什么？
- neo4j——图数据库初探 - JDream314的专栏 - 博客频道 - CSDN.NET
- js - （初中级）常见笔试面试题
- C++ 写时拷贝 3
- powerShell中 diff的使用
- python中a=str(int(a))什么意思_python中a+=a和a=a+a的区别
- 学习Jsoup（一）
- struts2中的addActionError addFieldError addActionMessage的方法
- 【android】环境变量的设置
- 从排序开始（三）归并排序
- 【CSDN最全java项目实战500篇】练手/项目经验/毕设刚需
- 云管平台-FIT2CLOUD CMP2.0
- oracle临时表的创建
- Go语言的前景、优点
- 成功焊接BGA芯片技巧
- 不同手机型号图文预览_微信编辑器预览一般以多大的手机尺寸为准？