小程序模板網(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.標(biāo)題title 2.圖片地址 3.數(shù)量num 4.價格price  5.是否選中selected 

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

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

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

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

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

步驟：

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

1.1 布局與樣式表

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

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

先看一下效果圖：

頁面代碼如圖:



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




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



	首先：先定義js



	在page.data里面

            


            


            

            

                
                

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

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢