flex实现小程序导航新手教程

flex实现小程序导航新手教程。

实现示意：

1.链接顶部内边距，留出圆形图标的位置。

2.伪元素:before绘制圆形。

3.圆形中添加图标。

4.左右外边距控制间距，及促使在需要的地方换行。

如果需要字数限制的话：

资本

1. .serviceMenu{ 
2.  
3. display:flex;?//使用flex布局 
4.  
5. flex-wrap:wrap;?//子元素换行 
6.  
7. justify-content:center;?//子元素居中对齐 
8.  
9. padding:30rpx 0;?//留出上下边距 
10.  
11. } 
12.  
13. .serviceMenu navigator{ 
14.  
15. position:relative;?//为了绝对定位 
16.  
17. padding-top:120rpx;?//留出圆形图标的位置 
18.  
19. flex-basis:140rpx;?//设定基础宽度 
20.  
21. margin:15rpx;?//触发换行位置(小程序会自动换算，不必考虑适配) 
22.  
23. text-align:center; 
24.  
25. font-size:24rpx; 
26.  
27. } 
28.  
29. //创建图标 
30.  
31. .serviceMenu navigator:before{ 
32.  
33. content:"/20"; 
34.  
35. position:absolute; 
36.  
37. top:0; 
38.  
39. left:50%; 
40.  
41. margin-left:-55rpx; 
42.  
43. width:110rpx; 
44.  
45. height:110rpx; 
46.  
47. border-radius:50%; 
48.  
49. background:#bbc1cd; 
50.  
51. } 
52.  
53. //设定不同图标。注意链接地址是绝对地址，因为小程序不支持相对地址的背景图。只支持image相对地址。 
54.  
55. .serviceMenu navigator:nth-child(1):before{ 
56.  
57. background:#fc6e51 url(https://xwbline.com/icon_service_big01.png) no-repeat center center; 
58.  
59. } 
60.  
61. .serviceMenu navigator:nth-child(2):before{ 
62.  
63. background:#48cfad url(https://xwbline.com/icon_service_big02.png) no-repeat center center; 
64.  
65. } 
66.  
67. ……………… 
68.  
69. text{ 
70.  
71. display:block; 
72.  
73. overflow:hidden; 
74.  
75. white-space:nowrap; 
76.  
77. text-overflow:ellipsis; 
78.  
79. }