小程序模板網(wǎng)

微信小程序購物車實戰(zhàn):加減商品數(shù)量,匯總價格,全選與全不選 ... ...

發(fā)布時間:2018-03-28 15:09 所屬欄目:小程序開發(fā)教程

微信小程序,這里實現(xiàn)微信小程序checkbox,有需要此功能的朋友可以參考下。

摘要: 加減商品數(shù)量,匯總價格,全選與全不選

設(shè)計思路:

一、從網(wǎng)絡(luò)上傳入以下Json數(shù)據(jù)格式的數(shù)組  1.標題title 2.圖片地址 3.數(shù)量num 4.價格price  5.是否選中selected 

二、點擊復(fù)選框toggle操作 如已經(jīng)選中的,經(jīng)點擊變成未選中,反之而反之 點擊依據(jù)index作為標識,方便遍歷

三、全選操作 首次點擊即為全部選中,再次點擊為全不選,全選按鈕本身也跟隨toggle變換

四、點擊結(jié)算按鈕,將已選中的數(shù)組取出,以供通過網(wǎng)絡(luò)提交到服務(wù)端,這里給個toast作為結(jié)果演示。

五、利用stepper作加減運算,同樣依據(jù)index作為標識,點完寫回num值。

六、布局,全選與結(jié)算按鈕底部對齊,購物車商城自適應(yīng)高度,類似于Android的weight。

步驟:

初始數(shù)據(jù)渲染

1.1 布局與樣式表

上方是一個商品列表,下方是一個全選按鈕與立即結(jié)算按鈕

商品列表左部為商品縮略圖,右上為商品標題,右下為商品價格與數(shù)量,

先看一下效果圖:

頁面代碼如圖:


  1. <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
  2. <view class="my-wrap"> <view class="my-tlt">
  3. {{item.title}}
  4. </view>
  5. <view class="my-list bordernone">
  6. <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" class="my-check"/>
  7. <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" class="my-check"/>
  8. <image src="{{item.image}}" class="my-pic" mode="aspectFill"></image>
  9. <view class="my-left">
  10. <view class="my-title"> K金磚玉石電視背景墻磚</view>
  11. <text class="my-txt">尺寸:800X800</text>
  12. <view class="my-bnt">
  13.  
  14. <!-- 減號 -->
  15. <text class="{{minusStatuses[index]}} bnt" data-index="{{index}}" bindtap="bindMinus">-</text>
  16. <!-- 數(shù)值 -->
  17. <input type="number" bindchange="bindManual" class="int" value="{{item.num}}" />
  18. <!-- 加號 -->
  19. <text class="normal bnt" data-index="{{index}}" bindtap="bindPlus">+</text>]
  20.  
  21.  
  22. </view>
  23. </view>
  24. <view class="my-right">
  25. <icon class="iconfont del"/>
  26. <text class="gay">¥{{item.price}}</text>
  27. </view>
  28. </view>
  29. </view>
  30.  
  31. <view class="float">
  32.  
  33. <!-- 全選 -->
  34. <view bindtap="bindSelectAll" class="my-sel" >
  35. <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20" class="l-mycheck"/>
  36. <icon wx:else type="circle" size="20" class="l-mycheck"/>
  37. <text>全選</text>
  38. </view>
  39. <view class="my-rightbox">
  40. <view class="my-count" data='{{sep}}'>
  41.  
  42. <!-- 統(tǒng)計 -->
  43. 合計(不含運費):¥<text>{{count}}</text>
  44. </view>
  45. <view class="my-bnts" bindtap="setPayment" >
  46. 結(jié)算(<text>{{number}}</text>)
  47. </view>
  48. </view>
  49. </view>

這里css自己去寫,這里不做多介紹,只做效果:

首先:先定義js

在page.data里面


本文地址:http://u-renovate.com/wxmini/doc/course/22914.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢