微信小程序 flex實(shí)現(xiàn)導(dǎo)航實(shí)例詳解
更新時(shí)間：2017年04月26日 15:36:29 投稿：lqh
這篇文章主要介紹了微信小程序 flex實(shí)現(xiàn)導(dǎo)航實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
微信小程序 flex實(shí)現(xiàn)導(dǎo)航實(shí)例詳解
實(shí)現(xiàn)示意：
1.鏈接頂部?jī)?nèi)邊距，留出圓形圖標(biāo)的位置。
2.偽元素:before繪制圓形。
3.圓形中添加圖標(biāo)。
4.左右外邊距控制間距，及促使在需要的地方換行。
wxml：
<view class="serviceMenu"> <navigator url="http://xwbline.com/">資本</navigator> …… </view>
wxss：
.serviceMenu{
display:flex; //使用flex布局
flex-wrap:wrap; //子元素?fù)Q行
justify-content:center; //子元素居中對(duì)齊
padding:30rpx 0; //留出上下邊距
}
.serviceMenu navigator{
position:relative; //為了絕對(duì)定位
padding-top:120rpx; //留出圓形圖標(biāo)的位置
flex-basis:140rpx; //設(shè)定基礎(chǔ)寬度
margin:15rpx; //觸發(fā)換行位置（小程序會(huì)自動(dòng)換算，不必考慮適配）
text-align:center;
font-size:24rpx;
}
//創(chuàng)建圖標(biāo)
.serviceMenu navigator:before{
content:"\20";
position:absolute;
top:0;
left:50%;
margin-left:-55rpx;
width:110rpx;
height:110rpx;
border-radius:50%;
background:#bbc1cd;
}
//設(shè)定不同圖標(biāo)。注意鏈接地址是絕對(duì)地址，因?yàn)樾〕绦虿恢С窒鄬?duì)地址的背景圖。只支持image相對(duì)地址。
.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;
}
………………
如果需要字?jǐn)?shù)限制的話：
text{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
Zod進(jìn)行TypeScript類(lèi)型驗(yàn)證使用詳解
這篇文章主要為大家介紹了Zod進(jìn)行TypeScript類(lèi)型驗(yàn)證使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
await vs return vs return await關(guān)鍵區(qū)別
這篇文章主要為大家介紹了await vs return vs return await關(guān)鍵區(qū)別解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
umi插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析
這篇文章主要為大家介紹了umi插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
websocket心跳重連實(shí)現(xiàn)探索(npm:websocket-heartbeat-js)
這篇文章主要為大家介紹了websocket心跳重連實(shí)現(xiàn)探索(npm:websocket-heartbeat-js)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
微信小程序 解析網(wǎng)頁(yè)內(nèi)容詳解及實(shí)例
這篇文章主要介紹了微信小程序 解析網(wǎng)頁(yè)內(nèi)容詳解及實(shí)例的相關(guān)資料,這里使用爬蟲(chóng)對(duì)復(fù)雜的網(wǎng)頁(yè)進(jìn)行抓取，遇到些問(wèn)題，這里整理下并解決，需要的朋友可以參考下2017-02-02
Astro Islands靜態(tài)頁(yè)面交互式UI組件
這篇文章主要為大家介紹了Astro Islands靜態(tài)頁(yè)面交互式UI組件使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了Electron 剪貼板實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 教程之wxapp視圖容器 swiper的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JavaScript文檔對(duì)象模型DOM，當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型，通過(guò)可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的 HTML。下面來(lái)看看文章得詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03