最終效果
Unicode 是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式蝌戒，特點(diǎn)是：
- 兼容性最好，支持 IE6+沼琉，及所有現(xiàn)代瀏覽器北苟。
- 支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等打瘪。
- 但是因?yàn)槭亲煮w友鼻，所以不支持多色傻昙。只能使用平臺(tái)里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色彩扔。
2020-05-21（祝各位分手快樂(lè)哈）
iconFont更新后的使用更新
- 依然是選擇需要的icon下載素材屋匕，解壓包
- 拷貝項(xiàng)目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('@/static/iconfont.eot');
src: url('@/static/iconfont.eot?#iefix') format('embedded-opentype'),
url('@/static/iconfont.woff2') format('woff2'),
url('@/static/iconfont.woff') format('woff'),
url('@/static/iconfont.ttf') format('truetype'),
url('@/static/iconfont.svg#iconfont') format('svg');
}
- 將@font-face相關(guān)的url放到static文件夾下
與舊版本相比較，引入文件增加借杰，@font-face修改一下
1.原生導(dǎo)航欄
pages.json文件
{
"path" : "pages/create/pick-sku",
"style" : {
"navigationBarTitleText": "選擇商品",//導(dǎo)航欄標(biāo)題
"navigationBarBackgroundColor": "#EA8C1B",//導(dǎo)航欄背景顏色
"backgroundColorTop":"#EA8C1B",//頂部窗口的背景色(IOS)
"app-plus": {
"titleNView": {
"type": "transparent",
"titleColor": "#fff",
"backgroundColor": "#007AFF",
"buttons": [{//title icon
"fontSrc": "/static/uni.ttf",
"text": "\ue537",
"width": "40px",
"fontSize": "28px",
"color": "#fff",
"background": "rgba(0,0,0,0)"
}]
}
}
}
}
//關(guān)于每個(gè)屬性的解釋查看官網(wǎng)
2.更換頂部導(dǎo)航欄icon
這里的icon只能使用FontIcon(字體圖標(biāo)),可以查看阿里巴巴矢量圖標(biāo)庫(kù)过吻，這個(gè)icon庫(kù)的icon可以拿來(lái)用
如何將icon拿來(lái)用，下面是具體的步驟：
1.打開(kāi)阿里巴巴矢量圖標(biāo)庫(kù)的網(wǎng)址
2.選擇需要的矢量圖icon,加入購(gòu)物車(chē)
加入購(gòu)物車(chē)
3.選擇購(gòu)物車(chē)蔗衡，打開(kāi)購(gòu)物車(chē)纤虽，點(diǎn)擊下載代碼
購(gòu)物車(chē)圖標(biāo)最右側(cè)
下載代碼
4.解壓下載包，找到iconfont.ttf和iconfont.css,兩份文件
5.在自己的項(xiàng)目中打開(kāi)绞惦，可以放到static目錄下
6.在iconfont.css中逼纸，找到需要運(yùn)用的Unicode
\exxxx
\e60f 我們需要運(yùn)用的unicode
\e60f 要修改為 \ue60f
修改pages.json中需要修改的page
{
"path" : "pages/create/pick-sku",
"style" : {
"navigationBarTitleText": "選擇商品",
"navigationBarBackgroundColor": "#EA8C1B",//導(dǎo)航欄背景顏色
"backgroundColor": "#EA8C1B",
"backgroundColorTop":"#EA8C1B",//頂部窗口的背景色(IOS)
"app-plus": {
"titleNView": {
"autoBackButton":"false",//去掉原生自帶的back icon
"buttons": [{//自己的back icon
"fontSrc": "/static/iconfont.ttf",
"text": "\ue612",
"width": "auto",
"fontSize": "32upx",
"color": "#FFFFFF",
"background": "rgba(0,0,0,0)",
"float":"left"
},{//右邊的icon，最多3個(gè)
"fontSrc": "/static/iconfont.ttf",
"text": "\ue610",
"width": "auto",
"fontSize": "32upx",
"color": "rgba(225,225,225,.4)",
"background": "rgba(0,0,0,0)"
}]
}
}
}
},
//導(dǎo)航欄部分的icon最多四個(gè)济蝉，包括left的返回按鈕
//把對(duì)應(yīng)圖標(biāo)的編碼填寫(xiě)到page.json的配置項(xiàng)里text杰刽，必須寫(xiě)成一個(gè)"\u***"，然后重啟
7.對(duì)于icon的點(diǎn)擊監(jiān)聽(tīng)
export default {
data() { return {} },
onNavigationBarButtonTap(e) {
console.log("點(diǎn)擊了自定義按鈕");
console.log(e.index);//按鈕的id王滤，根據(jù)定義的順序0,1,2
}
}
3.ios鍵盤(pán)彈起頁(yè)面被頂上贺嫂，position為fixed失效
當(dāng)頁(yè)面存在input，需要輸入的情況時(shí)雁乡，鍵盤(pán)彈起第喳，頁(yè)面被頂上position為fixed失效。
uni-app導(dǎo)航欄開(kāi)發(fā)指南
社區(qū)關(guān)于這一塊有具體的解釋?zhuān)梢匀タ纯础?br>
社區(qū)包括官網(wǎng)都有提到能使用原生的情況下踱稍，盡量使用原生的導(dǎo)航欄曲饱。
