訂單頁面

需要用到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; }

并且在wxml最外層的view中引用class屬性?

除此之外還有 每一個條目 ，單選框樣式

.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的數據，和綁定點擊事件

<view class='container'><view class='section section-good'><checkbox-group bindchange="checkboxChange"><view class='good' wx:for='{{goodList}}' wx:for-item="good" wx:key="good.name"><label class="checkbox"><checkbox value="{{good.isbn}}" checked="{{good.checked}}" hidden='hidden' /><icon type="circle" size="23" wx:if="{{!good.checked}}"></icon><icon type="success" size="23" wx:if="{{good.checked}}"></icon></label><image class='cover' src='{{good.cover}}'></image><view class='content'><view class='text name'>{{good.name}}</view><view class='text author'>{{good.author}}</view><view class='text desc'>{{good.desc}}</view><view class='text price'>￥{{good.price}}</view></view><view class='stepper'><view class='subtract {{good.count == 1 ? "disabled": ""}}' data-index='{{index}}' catchtap='subtracttap'>-</view><input class='count' type='number' value='{{good.count}}'></input><view class='add' data-index="{{index}}" catchtap='addtap'>+</view></view></view></checkbox-group></view><view class='section-bottom'><checkbox-group bindchange="selectalltap"><label class='checkbox-allcheck'><checkbox value="{{!checkAll}}" checked="{{checkAll}}" hidden='hidden' /><icon type="circle" size="23" wx:if="{{!checkAll}}"></icon><icon type="success" size="23" wx:if="{{checkAll}}"></icon><text class='check-all-text'>全選</text></label></checkbox-group><view class="total"><view class='totalCount'>已選擇<text>{{totalCount}}</text>件商品</view><view class='totalPrice'>總價：<text>￥{{totalPrice}}</text></view></view><view class='btn {{totalCount > 0 ? "btn-primary" : "btn-default"}}'>去結算</view></view> </view>

在wxml中我們綁定了一下幾個點擊事件

subtracttap 用戶點擊減號

addtap 用戶點擊加號

checkboxChange 商品單選按鈕的點擊

selectalltap? 點擊全選

之后 我們在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();}})

以上就實現了 單選，計算總價，等功能

總結

以上是生活随笔為你收集整理的一步一步实现商城微信小程序（四）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。