微信小程序 flex實現(xiàn)導航實例詳解
實現(xiàn)示意：
1.鏈接頂部內邊距，留出圓形圖標的位置。
2.偽元素:before繪制圓形。
3.圓形中添加圖標。
4.左右外邊距控制間距，及促使在需要的地方換行。
wxml：
<view class="serviceMenu"> <navigator url="http://xwbline.com/">資本</navigator> ……</view>
wxss：
.serviceMenu{ display:flex; //使用flex布局 flex-wrap:wrap; //子元素換行 justify-content:center; //子元素居中對齊 padding:30rpx 0; //留出上下邊距 } .serviceMenu navigator{ position:relative; //為了絕對定位 padding-top:120rpx; //留出圓形圖標的位置 flex-basis:140rpx; //設定基礎寬度 margin:15rpx; //觸發(fā)換行位置（小程序會自動換算，不必考慮適配） text-align:center; font-size:24rpx; } //創(chuàng)建圖標 .serviceMenu navigator:before{ content:"/20"; position:absolute; top:0; left:50%; margin-left:-55rpx; width:110rpx; height:110rpx; border-radius:50%; background:#bbc1cd; } //設定不同圖標。注意鏈接地址是絕對地址，因為小程序不支持相對地址的背景圖。只支持image相對地址。 .serviceMenu navigator:nth-child(1):before{ background:#fc6e51 url(http://xwbline.com/icon_service_big01.png) no-repeat center center; } .serviceMenu navigator:nth-child(2):before{ background:#48cfad url(http://xwbline.com/icon_service_big02.png) no-repeat center center; } ………………如果需要字數(shù)限制的話：
text{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
