微信小程式 購物車簡單例項
微信小程式，這裡實現購物車功能的小demo,有需要此功能的朋友可以參考下。
摘要: 加減商品數量，彙總價格，全選與全不選
設計思路：
一、從網路上傳入以下Json資料格式的陣列 1.購物車id：cid 2.標題title 3.數量num 4.圖片地址 5.價格price 6.小計 7.是否選中selected
二、點選複選框toggle操作 如已經選中的，經點選變成未選中，反之而反之 點選依據index作為標識，而不用cid，方便遍歷
三、全選操作 首次點選即為全部選中，再次點選為全不選，全選按鈕本身也跟隨toggle變換
四、點選結算按鈕，將已選中的cid陣列取出，以供通過網路提交到服務端，這裡給個toast作為結果演示。
五、利用stepper作加減運算，同樣依據index作為標識，點完寫回num值。
六、佈局，全選與結算按鈕底部對齊，購物車商城自適應高度，類似於Android的weight。
步驟：
初始資料渲染
1.1 佈局與樣式表
上方是一個商品列表，下方是一個全選按鈕與立即結算按鈕
商品列表左部為商品縮圖，右上為商品標題，右下為商品價格與數量，其中商品數量使用WXStepper來實現加減操作
js：初始化一個數據源，這往往是從網路獲取的，相關介面可參見：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
佈局檔案
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<view
class="container carts-list">
<view
wx:for="{{carts}}"
class="carts-item"
data-title="{{item.title}}"
data-url="{{item.url}}"
bindtap="bindViewTap">
<view>
<image
class="carts-image"
src="{{item.image}}"
mode="aspectFill"/>
</view>
<view
class="carts-text"><text
class="carts-title">{{item.title}}</text>
<view
class="carts-subtitle">
<text
class="carts-price">{{item.sum}}</text>
<text>WXStepper</text>
</view>
</view>
</view>
</view>
|
樣式表
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
/*外部容器*/
.container {
display: flex;
flex-direction: column;
align-items:
center;
justify-content: space-between;
box-sizing: border-box;
}
/*整體列表*/
.carts-list {
display: flex;
flex-direction: column;
padding:
20rpx 40rpx;
}
/*每行單元格*/
.carts-item {
display: flex;
flex-direction: row;
height:150rpx;
/*width屬性解決標題文字太短而縮圖偏移*/
width:100%;
border-bottom:
1px solid
#eee;
padding:
30rpx 0;
}
/*左部圖片*/
.carts-image {
width:150rpx;
height:150rpx;
}
/*右部描述*/
.carts-text {
width:
100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*右上部分標題*/
.carts-title {
margin:
10rpx;
font-size:
30rpx;
}
/*右下部分價格與數量*/
.carts-subtitle {
font-size:
25rpx;
color:darkgray;
padding:
0 20rpx;
display: flex;
flex-direction: row;
justify-content:space-between;
}
/*價格*/
.carts-price {
color:
#f60;
}
|
1.2 整合WXStepper
1.2.1 複製元件內容
[2016-10-16]
將stepper.wxss的內容複製到cart.wxss中
將stepper.wxml的內容複製到cart.wxml中
與之前的單一元件不同的是：這裡要定義陣列minusStatuses來與每一個加減按鈕相應。當然，合併入carts也是沒問題的。
minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']
原來的靜態字元WXStepper換成以下的程式碼
?| 1 2 3 4 5 6 7 8 |
<view class="stepper">
<!-- 減號 -->
<text class="{{minusStatuses[index]}}"
data-index="{{index}}"
bindtap="bindMinus">-</text>
<!-- 數值 -->
<input type="number"
bindchange="bindManual"
value="{{item.num}}"
/>
<!-- 加號 -->
<text class="normal"
data-index="{{index}}"
bindtap="bindPlus">+</text>
</view>
|
js程式碼bindMinus、bindPlus分別改造為如下：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
bindMinus: function(e) {
var
index = parseInt(e.currentTarget.dataset.index);
var
num = this.data.carts[index].num;
// 如果只有1件了，就不允許再減了
if
(num > 1) {
num --;
}
// 只有大於一件的時候，才能normal狀態，否則disable狀態
var
minusStatus = num <= 1 ? 'disabled'
: 'normal';
// 購物車資料
var
carts = this.data.carts;
carts[index].num = num;
// 按鈕可用狀態
var
minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;
// 將數值與狀態寫回
this.setData({
carts: carts,
minusStatuses: minusStatuses
});
},
bindPlus:
function(e) {
var
index = parseInt(e.currentTarget.dataset.index);
var
num = this.data.carts[index].num;
// 自增
num ++;
// 只有大於一件的時候，才能normal狀態，否則disable狀態
var
minusStatus = num <= 1 ? 'disabled'
: 'normal';
// 購物車資料
var
carts = this.data.carts;
carts[index].num = num;
// 按鈕可用狀態
var
minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;
// 將數值與狀態寫回
this.setData({
carts: carts,
minusStatuses: minusStatuses
});
},
|
效果如圖：
[2016-10-17]
修正手工改動數量儲存到陣列
1.3 整合LXCheckboxGroup
複製佈局檔案程式碼到wxml，這裡需要判斷一下已選狀態，一般購物車勾選狀態是記錄在網路的。
index值用於傳值js，遍歷之用。
?| 1 2 3 |
<!-- 複選框圖示 -->
<icon
wx:if="{{item.selected}}"
type="success_circle"
size="20"
bindtap="bindCheckbox"
data-index="{{index}}"/>
<icon
wx:else type="circle"
size="20"
bindtap="bindCheckbox"
data-index="{{index}}"/>
|
複選框居中
?| 1 2 3 4 5 |
/*複選框樣式*/
.carts-list icon {
margin-top: 60rpx;
margin-right: 20rpx;
}
|
繫結點選複選框事件，對選擇狀態做反選操作。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
bindCheckbox:
function(e) {
/*繫結點選事件，將checkbox樣式改變為選中與非選中*/
//拿到下標值，以在carts作遍歷指示用
var
index = parseInt(e.currentTarget.dataset.index);
//原始的icon狀態
var
selected = this.data.carts[index].selected;
var
carts = this.data.carts;
// 對勾選狀態取反
carts[index].selected = !selected;
// 寫回經點選修改後的陣列
this.setData({
carts: carts
});
}
|
效果圖：
1.4 加入全選與立即結算按鈕
1.4.1 修改佈局檔案，實現上述按鈕底部對齊，使用flex與固定高度來完成。
減少為3行，看是否還在最底；此外，還要保證懸浮在底部，不被列表項的滾動而滾動。
?| 1 2 3 4 5 6 7 8 |
<view class="carts-footer">
<view bindtap="bindSelectAll">
<icon wx:if="{{selectedAllStatus}}"
type="success_circle"
size="20"/>
<icon wx:else
type="circle"
size="20" />
<text>全選</text>
</view>
<view class="button">立即結算</view>
</view>
|
之前用<button>立即結算</button>來實現，發現無論如何都不能實現全選部件與結算按鈕分散對齊，不響應如下樣式
?| 1 2 3 |
display: flex;
flex-direction: row;
justify-content: space-between;
|
樣式表
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/*底部按鈕*/
.carts-footer {
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/*複選框*/
.carts-footer icon {
margin-left: 20rpx;
}
/*全選字樣*/
.carts-footer text {
font-size: 30rpx;
margin-left: 8rpx;
line-height: 10rpx;
}
/*立即結算按鈕*/
.carts-footer .button {
line-height: 80rpx;
text-align: center;
width:220rpx;
height: 80rpx;
background-color:
#f60;
color: white;
font-size: 36rpx;
border-radius: 0;
border: 0;
}
|
1.4.2 全選與全不選事件
實現bindSelectAll事件，改變全選狀態
首先定義一個data值，以記錄全選狀態
selectedAllStatus: false
事件實現：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
bindSelectAll:
function() {
// 環境中目前已選狀態
var
selectedAllStatus = this.data.selectedAllStatus;
// 取反操作
selectedAllStatus = !selectedAllStatus;
// 購物車資料，關鍵是處理selected值
var
carts = this.data.carts;
// 遍歷
for
(var
i = 0; i < carts.length; i++) {
carts[i].selected = selectedAllStatus;
}
this.setData({
selectedAllStatus: selectedAllStatus,
carts: carts
});
}
|
1.4.3 立即結算顯示目前所選的cid，以供提交到網路，商品數量應該是包括在cid中的，後端設計應該只關注cid與uid
佈局檔案也埋一下toast，js只要改變toast的顯示與否即可。
?| 1 2 3 |
<toast
hidden="{{toastHidden}}"
bindchange="bindToastChange">
{{toastStr}}
</toast>
|
為立即結算繫結事件bindCheckout，彈出cid彈窗
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
bindCheckout:
function() {
// 初始化toastStr字串
var
toastStr = 'cid:';
// 遍歷取出已勾選的cid
for
(var
i = 0; i < this.data.carts.length; i++) {
if
(this.data.carts[i].selected) {
toastStr +=
this.data.carts[i].cid;
toastStr +=
' ';
}
}
//存回data
this.setData({
toastHidden:
false,
toastStr: toastStr
});
},
bindToastChange:
function() {
this.setData({
toastHidden:
true
});
}
|
1.5 底部懸浮固定
1.5.1 商品列表 .carts-list 加入 margin-bottom: 80rpx; 以及修改上邊距為零，使得底部部件與分隔不重複出現，padding: 0 40rpx;
1.5.2 底部按鈕 .carts-footer 加入 background: white;
1.5.3 .carts-footer 加入
?| 1 2 3 |
position: fixed;
bottom: 0;
border-top: 1px solid
#eee;
|
1.6 彙總
1.6.1 首先定義一個數據源，並在佈局檔案中埋坑
total: ''
<text>{{total}}</text>
1.6.2 通用匯總函式
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
sum: function() {
var
carts = this.data.carts;
// 計算總金額
var
total = 0;
for
(var
i = 0; i < carts.length; i++) {
if
(carts[i].selected) {
total += carts[i].num * carts[i].price;
}
}
// 寫回經點選修改後的陣列
this.setData({
carts: carts,
total:
'￥' + total
});
}
|
然後分別在bindMinus bindPlus bindCheckbox bindSelectAll onLoad中呼叫this.sum()
如圖：
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支援！
參考地址：http://www.jb51.net/article/95563.htm
相關推薦
微信小程式 購物車簡單例項
微信小程式，這裡實現購物車功能的小demo,有需要此功能的朋友可以參考下。 摘要: 加減商品數量，彙總價格，全選與全不選 設計思路： 一、從網路上傳入以下Json資料格式的陣列 1.購物車id：cid 2.標題title 3.數量num 4.圖片地址 5.價格price 6.小計 7.是否選中selecte
微信小程式計算器簡單介面例項
閒著無聊自己搭建了一個計算器的簡單介面 index.wxml <view class='content' > <view class='screen'> 0 </
微信小程式web-view例項
微信小程式web-view例項 index.js //index.js //獲取應用例項 const app = getApp() Page({ /** * 頁面的初始資料 */ data: { },
微信小程式的簡單介紹
微信小程式的簡單介紹 1.與HTML的區別 HTML 微信小程式 <div></div> <view></view>
微信小程式 之 “簡單自作輪播圖”
微信小程式輪播圖的是通過元件swiper來實現的 swiper 又叫 滑塊檢視容器 很多時候，我們只做頁面的時候都會用到圖片的輪播效果，剛開始接觸的時候也不會弄，所以直接進入主題，製作一個超簡單粗暴的輪播圖試試。 1. 新建一個專案，在所以需要新增輪播圖的介面（.wxm
微信小程式購物車
wxml <view class="main"> <view wx:if="{{hasList}}"> <view class='merchant-name'> <icon wx:if="{{selectAl
微信小程式相關專案例項集合
大家下午好，上午逛部落格的時候發現了一片有關於小程式的專案例項合集，我大致看了一下挺好的，特此拿過來希望可以幫到小夥伴們。 如下： wx-gesture-lock 微信小程式的手勢密碼 WXCustomSwitch 微信小程式自定義 Switch 元件模板 WeixinAppBdNovel
微信小程式之簡單暴力的Tab可滑動切換方式
最近一直在做小程式專案，對於不同需求來說真是煩不勝煩，之前做的訂單頁來說只需要可點選切換就可以，但是在後期的迭代中提到要求可滑動切換，下面我自己整理了一套比較簡單暴力的滑動切換方式，與大家
微信小程式之 簡單的使用者授權系列操作
一、獲取使用者登入狀態 和 獲取使用者資訊 想獲取使用者資訊，需要點選btn按鈕，給button設定屬性open-type="getUserInfo" 和bindgetuserinfo="MygetUserInfo" <button open-type="getUs
微信小程式入門-簡單頁面編寫
前言 今天微信小程式正式上線，抱著學習新技術的心態開始第一次接觸微信小程式，無論外面怎麼吹微信小程式怎麼幹掉大量的原生的app，作為一個新的事物，存在就必定有其存在的價值，作為一個學習者要保持一個正確的學習心態。勇於的追求新的東西。 應用範圍 張小龍對小程
微信小程式 購物車程式碼
// pages/goods/goods.js Page({ data: { goods: [ { "name": "熱銷榜", "type": -1, "foods": [ {
關於微信小程式購物車計價實現的思路
最近剛接觸小程式，我也算是前端小白水平的吧，給大家留點乾貨。專案是個商城，對於習慣操作DOM的小白來說，小程式的MVVM邏輯性要更強那麼一點，這也是目前MVVM前端框架比較火的原因，但是我個人覺得熟練之後也就還好。購物車這塊需要做價格監聽，首先我查看了別人的帖子，看了一下很多
微信小程式 資料訪問例項詳解
先簡單說一下，小程式的結構 如圖所示 1、每個檢視(.wxml)只需要新增對應名字的指令碼（.js）和樣式（.wxss）就可以了，不需要引用，page下面的指令碼以及樣式都是繼承至最外面的app.js , app.wxcss 2、指令碼也就是.js檔案，他有固定格式：p
微信小程式支付PHP例項
概述 支付主要分這幾個步驟： Created with Raphaël 2.1.0小程式小程式公眾平臺公眾平臺伺服器伺服器1. 呼叫wx.login()獲得獲取ticket2. 返回ticket3. 帶著ticket，向伺服器請求使用者OpenID4.
微信小程式_簡單頁面
這篇文章主要是用微信小程式的一些基本元件，做了一個簡單的頁面來和小夥伴們一起分享，如果有問題歡迎留言。 先看下效果圖： js程式碼部分: Page({ data: { names
微信小程式---購物車模組
本文章以一個購物車頁面為例，介紹購物車頁面的實現邏輯。如商品加減，商品數量顯示，商品刪除、商品選擇、商品總價計算等。先上圖：（文章結尾附上完整原始碼） 頁面排版不多說，看個人喜好決定。主要講講js部分。 1.商品數量＋ /** 繫結加數量事件 */ addCount(e)
微信小程式全選，微信小程式checkbox，微信小程式購物車
微信小程式，這裡實現微信小程式checkbox,有需要此功能的朋友可以參考下。 摘要: 加減商品數量，彙總價格，全選與全不選 設計思路： 一、從網路上傳入以下Json資料格式的陣列 1.標題title 2.圖片地址 3.數量num 4.價格price 5.是否選中selected 二、點選複選框tog
微信小程式--超簡單貪吃蛇
上程式碼：tan.js// pages/tan/tan.js var startX=0; var startY=0; var moveX = 0; var moveY = 0; //移動位置和開始位置的座標差值 var X=0; var Y =0; //蛇頭的物件 var
微信小程式實現tabs選項卡效果簡單程式碼例項
微信內部很多元件都已經封裝好了,但是卻沒有tab選項卡的元件，選項卡還是很常用的， 下面是一個簡單的效果 wxml <view class="swiper-tab">
微信小程式request請求後臺介面php簡單例項
沒有處理資料，直接返回了，具體再根據返回格式處理 public function getGoodInfo(Request $request) { $goods_datas =