flex实现小程序导航

作者：武兵，来自公众号 图说前端 

实现示意： 

1.链接顶部内边距，留出圆形图标的位置。 
2.伪元素:before绘制圆形。 
3.圆形中添加图标。 
4.左右外边距控制间距，及促使在需要的地方换行。

wxml：

1. <view class="serviceMenu">
2. <navigator url="http://xwbline.com/">资本</navigator>
3. ……
4. </view>

wxss：

1. .serviceMenu{
2. display:flex; //使用flex布局
3. flex-wrap:wrap; //子元素换行
4. justify-content:center; //子元素居中对齐
5. padding:30rpx 0; //留出上下边距
6. }
7.  
8. .serviceMenu navigator{
9. position:relative; //为了绝对定位
10. padding-top:120rpx; //留出圆形图标的位置
11. flex-basis:140rpx; //设定基础宽度
12. margin:15rpx; //触发换行位置（小程序会自动换算，不必考虑适配）
13. text-align:center;
14. font-size:24rpx;
15. }
16. //创建图标
17. .serviceMenu navigator:before{
18. content:"\20";
19. position:absolute;
20. top:0;
21. left:50%;
22. margin-left:-55rpx;
23. width:110rpx;
24. height:110rpx;
25. border-radius:50%;
26. background:#bbc1cd;
27. }
28. //设定不同图标。注意链接地址是绝对地址，因为小程序不支持相对地址的背景图。只支持image相对地址。
29. .serviceMenu navigator:nth-child(1):before{
30. background:#fc6e51 url(http://xwbline.com/icon_service_big01.png) no-repeat center center;
31. }
32.  
33. .serviceMenu navigator:nth-child(2):before{
34. background:#48cfad url(http://xwbline.com/icon_service_big02.png) no-repeat center center;
35. }
36. ………………

如果需要字数限制的话：

1. text{
2. display:block;
3. overflow:hidden;
4. white-space:nowrap;
5. text-overflow:ellipsis;
6. }