微信小程序 flex實現(xiàn)導(dǎo)航實例詳解
更新時間：2017年04月26日 15:36:29 投稿：lqh
這篇文章主要介紹了微信小程序 flex實現(xiàn)導(dǎo)航實例詳解的相關(guān)資料,需要的朋友可以參考下
微信小程序 flex實現(xiàn)導(dǎo)航實例詳解
實現(xiàn)示意：
1.鏈接頂部內(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; //子元素居中對齊
padding:30rpx 0; //留出上下邊距
}
.serviceMenu navigator{
position:relative; //為了絕對定位
padding-top:120rpx; //留出圓形圖標(biāo)的位置
flex-basis:140rpx; //設(shè)定基礎(chǔ)寬度
margin:15rpx; //觸發(fā)換行位置（小程序會自動換算，不必考慮適配）
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)。注意鏈接地址是絕對地址，因為小程序不支持相對地址的背景圖。只支持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;
}
………………
如果需要字?jǐn)?shù)限制的話：
text{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
微信小程序 wx.uploadFile在安卓手機(jī)上面the same task is working問題解決
這篇文章主要介紹了微信小程序 wx.uploadFile在安卓手機(jī)上面the same task is working問題解決的相關(guān)資料,需要的朋友可以參考下2016-12-12
相信絕大多數(shù)同學(xué)都聽過閉包這個概念，但閉包具體是什么估計很少有人能夠說的很詳細(xì)。說實話閉包在我們平時開發(fā)中應(yīng)該是很常見的，并且在前端面試中閉包也是常見的重要考點，在學(xué)習(xí)閉包之前我們先來看看作用域與作用域鏈，因為這是閉包的關(guān)鍵。2021-10-10
這篇文章主要為大家介紹了閉包結(jié)合遞歸等于柯里化的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
[藍(lán)色]非常好的js代碼...2006-06-06
JavaScript?腳本實現(xiàn)復(fù)雜的查詢改寫示例
這篇文章主要為大家介紹了JavaScript?腳本實現(xiàn)復(fù)雜的查詢改寫示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了JS原始類型為什么能調(diào)用方法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
一文詳解webpack中l(wèi)oader與plugin的區(qū)別
這篇文章主要為大家介紹了一文詳解webpack中l(wèi)oader與plugin的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了 quickjs 封裝 JavaScript 沙箱，在前文 JavaScript 沙箱探索 中聲明了沙箱的接口，并且給出了一些簡單的執(zhí)行任意第三方 js 腳本的代碼，但并未實現(xiàn)完整的 IJavaScriptShadowbox，下面便講一下如何基于 quickjs 實現(xiàn),需要的朋友可以參考一下2021-10-10
這篇文章主要為大家介紹了JS中自定義事件與觀察者模式的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例的相關(guān)資料,這里提供image觸摸并監(jiān)聽的簡單實例，需要的朋友可以參考下2017-08-08