小程序模板网

微信小程序实战商城系列《一》侧栏分类

发布时间:2017-12-09 16:47 所属栏目:小程序开发教程

在商场项目中,一般都会有分类页面。分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图布局分析:主盒子左盒子右盒子左盒子使用标准流右盒子使用绝对定位(top ...

 
 
 

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

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

左盒子使用标准流 
右盒子使用绝对定位(top、right) 

wxml:

 

		
  1. <!--主盒子-->
  2. <view class="container">
  3. <!--左侧栏-->
  4. <view class="nav_left">
  5. <block wx:for="{{navLeftItems}}">
  6. <!--当前项的id等于item项的id,那个就是当前状态-->
  7. <!--用data-index记录这个数据在数组的下标位置,使用data-id设置每个item的id值,供打开2级页面使用-->
  8. <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>
  9. </block>
  10. </view>
  11. <!--右侧栏-->
  12. <view class="nav_right">
  13. <!--如果有数据,才遍历项-->
  14. <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
  15. <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
  16. <view class="nav_right_items">
  17. <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
  18. <!--用view包裹图片组合,如果有图片就用,无图片提供就使用50x30的这个默认图片-->
  19. <view>
  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. <text>{{item.tree.desc}}</text>
  30. </view>
  31. <view wx:else>
  32. <text>{{item.tree.desc2}}</text>
  33. </view>
  34. </navigator>
  35. </view>


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