在商场项目中，一般都会有分类页面。

分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图

布局分析：

<主盒子>

<左盒子></左盒子>

<右盒子></右盒子>

</主盒子>

左盒子使用标准流

右盒子使用绝对定位（top、right）

wxml：

[html] view plain copy print?

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="//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>  

36.       </block>  

37.     </view>  

38.     <!--如果无数据，则显示数据-->  

39.     <view wx:else>暂无数据</view>  

40.   </view>  

41. </view>  

wxss：

[css] view plain copy print?

1. page{  

2.   background: #f5f5f5;  

3. }  

4. /*总体主盒子*/  

5. .container {  

6.   position: relative;  

7.   width: 100%;  

8.   height: 100%;  

9.   background-color: #fff;  

10.   color: #939393;  

11. }  

12.   

13. /*左侧栏主盒子*/  

14. .nav_left{  

15.   /*设置行内块级元素（没使用定位）*/  

16.   display: inline-block;  

17.   width: 25%;  

18.   height: 100%;  

19.   /*主盒子设置背景色为灰色*/  

20.   background: #f5f5f5;  

21.   text-align: center;  

22. }  

23. /*左侧栏list的item*/  

24. .nav_left .nav_left_items{  

25.   /*每个高30px*/  

26.   height: 30px;  

27.   /*垂直居中*/  

28.   line-height: 30px;  

29.   /*再设上下padding增加高度，总高42px*/  

30.   padding: 6px 0;  

31.   /*只设下边线*/  

32.   border-bottom: 1px solid #dedede;  

33.   /*文字14px*/  

34.   font-size: 14px;  

35. }  

36. /*左侧栏list的item被选中时*/  

37. .nav_left .nav_left_items.active{  

38.   /*背景色变成白色*/  

39.   background: #fff;  

40. }  

41.   

42. /*右侧栏主盒子*/  

43. .nav_right{  

44.   /*右侧盒子使用了绝对定位*/  

45.   position: absolute;  

46.   top: 0;  

47.   right: 0;  

48.   flex: 1;  

49.   /*宽度75%，高度占满，并使用百分比布局*/  

50.   width: 75%;  

51.   height: 100%;  

52.   padding: 10px;  

53.   box-sizing: border-box;  

54.   background: #fff;  

55. }  

56. /*右侧栏list的item*/  

57. .nav_right .nav_right_items{  

58.   /*浮动向左*/  

59.   float: left;  

60.   /*每个item设置宽度是33.33%*/  

61.   width: 33.33%;  

62.   height: 80px;  

63.   text-align: center;  

64. }  

65. .nav_right .nav_right_items image{  

66.   /*被图片设置宽高*/  

67.   width: 50px;  

68.   height: 30px;  

69. }  

70. .nav_right .nav_right_items text{  

71.   /*给text设成块级元素*/  

72.   display: block;  

73.   margin-top: 5px;  

74.   font-size: 10px;  

75.   /*设置文字溢出部分为...*/  

76.   overflow: hidden;  

77.   white-space: nowrap;  

78.   text-overflow: ellipsis;  

79. }  

js：

[javascript] view plain copy print?

1. Page({  

2.     data: {  

3.         navLeftItems: [],  

4.         navRightItems: [],  

5.         curNav: 1,  

6.         curIndex: 0  

7.     },  

8.     onLoad: function() {  

9.         // 加载的使用进行网络访问，把需要的数据设置到data数据对象  

10.         var that = this          

11.         wx.request({  

12.             url: '//huanqiuxiaozhen.com/wemall/goodstype/typebrandList',  

13.             method: 'GET',  

14.             data: {},  

15.             header: {  

16.                 'Accept': 'application/json'  

17.             },  

18.             success: function(res) {  

19.                 console.log(res)  

20.                 that.setData({  

21.                     navLeftItems: res.data,  

22.                     navRightItems: res.data  

23.                 })  

24.             }  

25.         })  

26.     },  

27.   

28.     //事件处理函数  

29.     switchRightTab: function(e) {  

30.         // 获取item项的id，和数组的下标值  

31.         let id = e.target.dataset.id,  

32.             index = parseInt(e.target.dataset.index);  

33.         // 把点击到的某一项，设为当前index  

34.         this.setData({  

35.             curNav: id,  

36.             curIndex: index  

37.         })  

38.     }  

39.   

40. })  

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！