分类入口，已经成为了商城项目必须的布局之一，这里以仿照淘宝的分类入口来做案例

下图红框部分，就是本文重点讲解部分，另外本文并没有写点击某个入口跳转页面。

页面分析：

使用for循环遍历所有项，插入页面，页面中的项使用左浮动，并使用百分比布局，设置20%的宽度每一项。

这样满5个item后，自动排在下一行

wxml：
[html] view plain copy print?
1. <view class="menu-wrp">  
2.   <!--设定一个item项后，遍历输出-->  
3.   <view class="menu-list" wx:for="{{menu.imgUrls}}">  
4.     <image class="menu-img" src="{{item}}" />  
5.     <view class="menu-desc">{{menu.descs[index]}}</view>  
6.   </view>  
7. </view>  
8. <view class="gap-1"></view>  
 
wxss：
[css] view plain copy print?
1. .menu-wrp {  
2.   width:100%;  
3.   margin-top:20rpx;  
4. }  
5. .menu-wrp:after{  
6.     content:"";  
7.     display:block;  
8.     clear:both;  
9. }  
10.   
11. .menu-list{  
12.     float:left;  
13.     width:20%;  
14.     box-sizing: border-box;  
15.     padding-bottom:10px;  
16. }  
17.   
18. .menu-img{  
19.     width:120rpx;  
20.     height:84rpx;  
21.     display:block;  
22.     margin:0 auto;  
23.     margin-bottom:5px;  
24. }  
25. .menu-desc{  
26.     background-color:#ffffff;  
27.     color:#333333;  
28.     width:100%;  
29.     text-align: center;  
30.     display:block;  
31.     font-size:12px;  
32. }  
33. .gap-1,.gap-2{  
34.     width:100%;  
35.     height:10rpx;  
36.     background:rgb(238, 238, 238);  
37. }  
 
js：
这里的准备的数据，我直接写在js中，同学们可以改编成通过访问接口来获取
[javascript] view plain copy print?
1. Page({  
2.   data: {  
3. //准备数据  
4.     menu:{  
5.       imgUrls:[  
6.         '//gw.alicdn.com/tps/i2/TB19BluIVXXXXX6XpXXN4ls0XXX-183-129.png?imgtag=avatar',  
7.         '//gw.alicdn.com/tps/TB1FDOHLVXXXXcZXFXXXXXXXXXX-183-129.png?imgtag=avatar',  
8.         '//gw.alicdn.com/tps/TB1PlmNLVXXXXXEXFXXXXXXXXXX-183-129.png?imgtag=avatar',  
9.         '//gw.alicdn.com/tps/TB1RN0HMFXXXXXNXpXXXXXXXXXX-183-129.png?imgtag=avatar',  
10.         '//gw.alicdn.com/tps/TB1exaOLVXXXXXeXFXXXXXXXXXX-183-129.png?imgtag=avatar',  
11.         '//img.alicdn.com/tps/TB1GzMJLXXXXXXoXXXXXXXXXXXX-183-129.png',  
12.         '//gw.alicdn.com/tps/i3/TB1Ewu2KVXXXXXkapXXN4ls0XXX-183-129.png',  
13.         '//gw.alicdn.com/tps/TB1cniBJpXXXXataXXXXXXXXXXX-183-129.png?imgtag=avatar',  
14.         '//img.alicdn.com/tps/TB1caopLVXXXXaDaXXXXXXXXXXX-183-129.png',  
15.         '//gw.alicdn.com/tps/i1/TB1c1FMIpXXXXawXpXXN4ls0XXX-183-129.png?imgtag=avatar'  
16.       ],  
17.       descs:[  
18.           '聚划算',  
19.           '天猫',  
20.           '天猫国际',  
21.           '外卖',  
22.           '天猫超市',  
23.           '充值中心',  
24.           '阿里旅行',  
25.           '领金币',  
26.           '到家',  
27.           '分类'  
28.       ]  
29.     }  
30.   }  
31.    
32. })

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