小程序模板网

微信小程序之侧栏分类 —— 微信小程序实战商城系列(1)

2017-12-13 这壁厢

在商场项目中,一般都会有分类页面,分类页面可以给用户快速找到相关的商品。

 
 
 

在商场项目中,一般都会有分类页面。 
分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图

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

左盒子使用标准流 
右盒子使用绝对定位(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>暂无数据view>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18155.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询