實(shí)現(xiàn)示意： 

1.鏈接頂部內(nèi)邊距，留出圓形圖標(biāo)的位置。 
2.偽元素:before繪制圓形。 
3.圓形中添加圖標(biāo)。 
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; //子元素?fù)Q行
4. justify-content:center; //子元素居中對齊
5. padding:30rpx 0; //留出上下邊距
6. }
7.  
8. .serviceMenu navigator{
9. position:relative; //為了絕對定位
10. padding-top:120rpx; //留出圓形圖標(biāo)的位置
11. flex-basis:140rpx; //設(shè)定基礎(chǔ)寬度
12. margin:15rpx; //觸發(fā)換行位置（小程序會自動換算，不必考慮適配）
13. text-align:center;
14. font-size:24rpx;
15. }
16. //創(chuàng)建圖標(biāo)
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. //設(shè)定不同圖標(biāo)。注意鏈接地址是絕對地址，因?yàn)樾〕绦虿恢С窒鄬Φ刂返谋尘皥D。只支持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. ………………

如果需要字?jǐn)?shù)限制的話：

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