用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

天下雪 2017-4-15 00:06

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

作者:michael_ouyang,来自原文地址 
在商场项目中,一般都会有分类页面。 
分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图 

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

左盒子使用标准流 
右盒子使用绝对定位(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>
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: michael_ouyang 来自: 授权地址

相关阅读