订单页面
需要用到js交互
首先在json文件中将页面的标题修改为“购物车”
data: { 'goodList': [ { 'name': '孤独是生命的礼物', 'author': '余光中，林清玄，白先勇 等 著', 'isbn': '9787535482051', 'cover': '/images/cover_1.jpg', 'desc': '缅怀乡愁诗人余光中。余光中、林清玄、白先勇联手巨献，重温经典，送别先生。总有一天，你会明白，孤独才是生命的常态。一部直击现代人孤独的精神献礼。中国散文协会推荐！', 'press': '长江文艺出版社', 'price': 25.9, 'count': 1, 'checked': false }, { 'name': '偷影子的人', 'author': '[法] 马克・李维 著；段韵灵 译', 'isbn': '9787540455958', 'cover': '/images/cover_2.jpg', 'desc': '数百万中文读者口口相传外国文学畅销经典', 'press': ' 湖南文艺出版社', 'price': 20.5, 'count': 1, 'checked': false }, { 'name': '无声告白', 'author': '[美] 伍绮诗 著；孙璐 译', 'isbn': '9787539982830', 'cover': '/images/cover_3.jpg', 'desc': '我们终此一生，就是要摆脱他人的期待，找到真正的自己。', 'press': ' 江苏凤凰文艺出版社', 'price': 24.1, 'count': 1, 'checked': false }, { 'name': '摆渡人', 'author': '[英] 克莱儿・麦克福尔 著；付强 译', 'isbn': '9787550013247', 'cover': '/images/cover_4.jpg', 'desc': '或许，命运就是一条孤独的河流，我们都会遇见灵魂的摆渡人。', 'press': ' 百花洲文艺出版社', 'price': 17.2, 'count': 1, 'checked': false }, { 'name': '追风筝的人', 'author': '[美] 卡勒德・胡赛尼 著；李继宏 译', 'isbn': '9787208061644', 'cover': '/images/cover_5.jpg', 'desc': '快乐大本营高圆圆感动推荐，奥巴马送给女儿的新年礼物。为你，千千万万遍！', 'press': '上海人民出版社', 'price': 17.7, 'count': 1, 'checked': false } ], 'checkAll': false, 'totalCount': 0, 'totalPrice': 0 }, 之后将上面data中的json数据复制到js文件的data目录下，用来模拟购物车中国呢显示的数据，在实际开发中，我们用到的基本都是网络请求数据
之后 我们来编写页面
首先我们在wxss文件中设置一个最外层的样式
.container { width: 100%; min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } 除此之外还有 每一个条目 ，单选框样式
.container { width: 100%; min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .section { display: flex; flex-direction: column; padding-left: 30rpx; padding-right: 30rpx; margin-bottom: 30rpx; } .section-good { margin-bottom: 100rpx; } .good { display: flex; flex-direction: row; align-items: center; position: relative; height: 250rpx; border-bottom: 1px solid #ccc; } .good:last-child { border-bottom: none; } .checkbox { width: 48rpx; height: 48rpx; } .cover { width: 142rpx; height: 214rpx; margin-left: 20rpx; } .content { flex: 1; margin-left: 20rpx; } .content .text { color: #363636; width: 450rpx; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .content .name { color: #333; font-size: 36rpx; } .content .author { font-size: 28rpx; color: #363636; margin-top: 10rpx; } .content .desc { color: #363636; font-size: 28rpx; margin-top: 10rpx; } .content .press { font-size: 28rpx; color: #363636; margin-top: 10rpx; } .content .price { font-size: 36rpx; color: #e4452a; margin-top: 10rpx; } .good .stepper { display: flex; position: absolute; right: 0; bottom: 20rpx; flex-direction: row; text-align: center; } .stepper .add, .stepper .subtract { width: 50rpx; height: 50rpx; line-height: 50rpx; font-size: 28rpx; border: 1px solid #ccc; box-sizing: border-box; } .stepper .disabled { color: #eee; } .stepper .count { width: 60rpx; height: 50rpx; line-height: 50rpx; border: 1px solid #ccc; text-align: center; box-sizing: border-box; min-height: 1rem; font-size: 28rpx; } .section-bottom { display: flex; flex-direction: row; align-items: center; width: 100%; height: 100rpx; position: fixed; bottom: 0; left: 0; margin-bottom: 0; background-color: #fff; box-sizing: border-box; z-index: 99; } .section-bottom .btn { width: 160rpx; height: 100rpx; line-height: 100rpx; text-align: center; color: #fdfffd; background-color: #fbb304; } .section-bottom .btn-default { color: #363636; background-color: #eee; } .section-bottom .btn-primary { color: #fdfffd; background-color: #fbb304; } .section-bottom .checkbox-allcheck { display: inline-block; margin-left: 30rpx; vertical-align: top; font-size: 0px; } .section-bottom .check-all-text { display: inline-block; vertical-align: top; margin-left: 10rpx; height: 23px; line-height: 23px; font-size: 28rpx; } .section-bottom .total { flex: 1; text-align: center; font-size: 26rpx; } .total .totalCount { font-size: 26rpx; display: inline-block; vertical-align: middle; } .total .totalPrice { display: inline-block; font-size: 26rpx; margin-left: 20rpx; vertical-align: middle; } .total .totalCount text { color: #e4452a; vertical-align: middle; } .total .totalPrice text { color: #e4452a; font-size: 36rpx; vertical-align: middle; } 全部设置完成之后，在wxml中引用 并且引用js中data的数据，和绑定点击事件
在wxml中我们绑定了一下几个点击事件
subtracttap 用户点击减号
addtap 用户点击加号
checkboxChange 商品单选按钮的点击
之后 我们在js文件中对这些点击事件进行处理，并且添加其他操作
.js
// pages/order/order.js Page({ /** * 页面的初始数据 */ data: { 'goodList': [ { 'name': '孤独是生命的礼物', 'author': '余光中，林清玄，白先勇 等 著', 'isbn': '9787535482051', 'cover': '/images/cover_1.jpg', 'desc': '缅怀乡愁诗人余光中。余光中、林清玄、白先勇联手巨献，重温经典，送别先生。总有一天，你会明白，孤独才是生命的常态。一部直击现代人孤独的精神献礼。中国散文协会推荐！', 'press': '长江文艺出版社', 'price': 25.9, 'count': 1, 'checked': false }, { 'name': '偷影子的人', 'author': '[法] 马克・李维 著；段韵灵 译', 'isbn': '9787540455958', 'cover': '/images/cover_2.jpg', 'desc': '数百万中文读者口口相传外国文学畅销经典', 'press': ' 湖南文艺出版社', 'price': 20.5, 'count': 1, 'checked': false }, { 'name': '无声告白', 'author': '[美] 伍绮诗 著；孙璐 译', 'isbn': '9787539982830', 'cover': '/images/cover_3.jpg', 'desc': '我们终此一生，就是要摆脱他人的期待，找到真正的自己。', 'press': ' 江苏凤凰文艺出版社', 'price': 24.1, 'count': 1, 'checked': false }, { 'name': '摆渡人', 'author': '[英] 克莱儿・麦克福尔 著；付强 译', 'isbn': '9787550013247', 'cover': '/images/cover_4.jpg', 'desc': '或许，命运就是一条孤独的河流，我们都会遇见灵魂的摆渡人。', 'press': ' 百花洲文艺出版社', 'price': 17.2, 'count': 1, 'checked': false }, { 'name': '追风筝的人', 'author': '[美] 卡勒德・胡赛尼 著；李继宏 译', 'isbn': '9787208061644', 'cover': '/images/cover_5.jpg', 'desc': '快乐大本营高圆圆感动推荐，奥巴马送给女儿的新年礼物。为你，千千万万遍！', 'press': '上海人民出版社', 'price': 17.7, 'count': 1, 'checked': false } ], 'checkAll': false, 'totalCount': 0, 'totalPrice': 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.calculateTotal(); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, /** * 计算商品总数 */ calculateTotal: function () { var goodList = this.data.goodList; var totalCount = 0; var totalPrice = 0; for (var i = 0; i < goodList.length; i++) { var good = goodList[i]; if (good.checked) { totalCount += good.count; totalPrice += good.count * good.price; } } totalPrice = totalPrice.toFixed(2); this.setData({ 'totalCount': totalCount, 'totalPrice': totalPrice }) }, /** * 用户点击商品减1 */ subtracttap: function (e) { var index = e.target.dataset.index; var goodList = this.data.goodList; var count = goodList[index].count; if (count <= 1) { return; } else { goodList[index].count--; this.setData({ 'goodList': goodList }); this.calculateTotal(); } }, /** * 用户点击商品加1 */ addtap: function (e) { var index = e.target.dataset.index; var goodList = this.data.goodList; var count = goodList[index].count; goodList[index].count++; this.setData({ 'goodList': goodList }); this.calculateTotal(); }, /** * 用户选择购物车商品 */ checkboxChange: function (e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value); var checkboxItems = this.data.goodList; var values = e.detail.value; for (var i = 0; i < checkboxItems.length; ++i) { checkboxItems[i].checked = false; for (var j = 0; j < values.length; ++j) { if (checkboxItems[i].isbn == values[j]) { checkboxItems[i].checked = true; break; } } } var checkAll = false; if (checkboxItems.length == values.length) { checkAll = true; } this.setData({ 'goodList': checkboxItems, 'checkAll': checkAll }); this.calculateTotal(); }, /** * 用户点击全选 */ selectalltap: function (e) { console.log('用户点击全选，携带value值为：', e.detail.value); var value = e.detail.value; var checkAll = false; if (value && value[0]) { checkAll = true; } var goodList = this.data.goodList; for (var i = 0; i < goodList.length; i++) { var good = goodList[i]; good['checked'] = checkAll; } this.setData({ 'checkAll': checkAll, 'goodList': goodList }); this.calculateTotal(); } }) 以上就实现了 单选，计算总价，等功能
文章来源: 一步一步实现商城微信小程序（四）