网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

微信小程序之側(cè)欄分類 —— 微信小程序?qū)崙?zhàn)商城系列(1)

發(fā)布時(shí)間:2017-12-13 09:01 所屬欄目:小程序開發(fā)教程

在商場項(xiàng)目中,一般都會(huì)有分類頁面,分類頁面可以給用戶快速找到相關(guān)的商品。

 
 
 

在商場項(xiàng)目中,一般都會(huì)有分類頁面。 
分類頁面可以給用戶快速找到相關(guān)的商品,下面以側(cè)欄分類為例,如下圖

布局分析: 
<主盒子> 
<左盒子> 
<右盒子> 

左盒子使用標(biāo)準(zhǔn)流 
右盒子使用絕對定位(top、right)

 

wxml:

 

		
  1. [html] view plain copy
  2.  
  3. <view class="container">
  4.  
  5. <view class="nav_left">
  6. <block wx:for="{{navLeftItems}}">
  7.  
  8.  
  9. <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}view>
  10. block>
  11. view>
  12.  
  13. <view class="nav_right">
  14.  
  15. <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
  16. <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
  17. <view class="nav_right_items">
  18. <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
  19.  
  20. <block wx:if="{{item.tree.logo}}">
  21. <image src="{{item.tree.logo}}">image>
  22. block>
  23. <block wx:else>
  24. <image src="http://temp.im/50x30">image>
  25. block>
  26. view>
  27.  
  28. <view wx:if="{{item.tree.desc}}">
  29. {{item.tree.desc}}text>
  30. view>
  31. <view wx:else>
  32. {{item.tree.desc2}}text>
  33. view>
  34. navigator>
  35. view>
  36. block>
  37. view>
  38.  
  39. <view wx:else>暫無數(shù)據(jù)view>


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/18155.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×