頂部導(dǎo)航欄和底部導(dǎo)航欄設(shè)置
在正式開發(fā)小程序的功能之前，首先需要確定小程序的主要框架。
創(chuàng)建幾個(gè)需要底部導(dǎo)航欄切換的頁(yè)面
我的小程序需要?jiǎng)?chuàng)建的頁(yè)面是“首頁(yè)”、“我想要”、“私信”、“我的”，“首頁(yè)”已經(jīng)存在于項(xiàng)目中，不需要重復(fù)創(chuàng)建。創(chuàng)建過程如下：
創(chuàng)建成功，不僅創(chuàng)建了star.vue，Hbuilder還自動(dòng)幫助創(chuàng)建了star文件夾
除此之外，還幫助我們?cè)?code>pages.json文件中進(jìn)行了配置
同理，繼續(xù)創(chuàng)建其他文件
使用阿里巴巴矢量圖標(biāo)庫(kù)
官網(wǎng)：阿里巴巴矢量圖標(biāo)庫(kù)
首先注冊(cè)賬號(hào)并登錄，然后點(diǎn)擊我的項(xiàng)目
創(chuàng)建一個(gè)新項(xiàng)目
搜索圖標(biāo)添加到項(xiàng)目中
將想要的圖標(biāo)添加到購(gòu)物車中
查看購(gòu)物車
將購(gòu)物車的圖標(biāo)添加到項(xiàng)目中
下載項(xiàng)目的圖標(biāo)到本地
將下載的文件解壓之后，把里面的.ttf文件拿出來(lái)
將ttf文件存儲(chǔ)到項(xiàng)目的靜態(tài)資源目錄下面
在項(xiàng)目中使用
"tabBar": {
"iconfontSrc": "static/icon/iconfont.ttf",
"color": "#333",
"selectedColor": "#2b92ff",
"list": [
{
"text": "首頁(yè)",
"pagePath": "pages/index/index",
"iconfont": {
"text": "\ue67e",
"selectedText": "\ue67e"
}
},{
"text": "我想要",
"pagePath": "pages/star/star"
},{
"text": "消息",
"pagePath": "pages/message/message"
},{
"text": "我的",
"pagePath": "pages/my/my"
}
]
}
運(yùn)行到瀏覽器中，查看網(wǎng)頁(yè)效果，圖標(biāo)正常
運(yùn)行到小程序中，查看效果，非常傷心，并不能正常使用
雖然在tabBar中無(wú)法使用iconfont，但是在頁(yè)面的其他地方還是可以使用的，請(qǐng)繼續(xù)后面的操作
將復(fù)制的在線代碼替換掉原有的代碼，下圖是替換前
下圖是替換后
之后，在每個(gè)鏈接前面添加上https
最后在App.vue文件中引入iconfont.css
到這里已經(jīng)大功告成了，可以使用了，想要使用哪個(gè)圖標(biāo)，先去復(fù)制圖標(biāo)的unicode，如下圖
在頁(yè)面中使用
顯示成功
完成底部導(dǎo)航欄tabBar
非常遺憾，上面引入的iconfont沒辦法再tabBar中使用，只能先把圖標(biāo)下載下來(lái)，然后再引入了
將下載的圖標(biāo)文件放入到項(xiàng)目的靜態(tài)文件下面
使用圖標(biāo)
"tabBar": {
"color": "#333",
"selectedColor": "#2b92ff",
"list": [
{
"text": "首頁(yè)",
"pagePath": "pages/index/index",
"iconPath": "static/icon/tabBar/首頁(yè).png",
"selectedIconPath": "static/icon/tabBar/首頁(yè).png"
},{
"text": "我想要",
"pagePath": "pages/star/star",
"iconPath": "static/icon/tabBar/收藏.png",
"selectedIconPath": "static/icon/tabBar/收藏.png"
},{
"text": "消息",
"pagePath": "pages/message/message",
"iconPath": "static/icon/tabBar/消息.png",
"selectedIconPath": "static/icon/tabBar/消息.png"
},{
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "static/icon/tabBar/我的.png",
"selectedIconPath": "static/icon/tabBar/我的.png"
}
]
}
- iconPath：未選中狀態(tài)的圖標(biāo)
- selectedIconPath：選中之后的圖標(biāo)
我這邊為了偷懶，未選中和選中狀態(tài)都使用相同的圖標(biāo)，你們可以使用不同的圖標(biāo)。
設(shè)置頁(yè)面頂部導(dǎo)航欄標(biāo)題
- navigationBarTitleText：導(dǎo)航的標(biāo)題
- enablePullDownRefresh：頁(yè)面是否允許下拉刷新
樣式優(yōu)化
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首頁(yè)",
"enablePullDownRefresh": true,
// 設(shè)置背景顏色
"navigationBarBackgroundColor": "#2b92ff",
// 設(shè)置標(biāo)題的顏色
"navigationBarTextStyle": "white"
}
}, {
"path": "pages/star/star",
"style": {
"navigationBarTitleText": "我想要",
"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#2b92ff",
"navigationBarTextStyle": "white"
}
}, {
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "我的",
"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#2b92ff",
"navigationBarTextStyle": "white"
}
}, {
"path": "pages/message/message",
"style": {
"navigationBarTitleText": "消息",
"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#2b92ff",
"navigationBarTextStyle": "white"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"color": "#292929",
"selectedColor": "#2b92ff",
"backgroundColor": "#ffffff",
"list": [{
"text": "首頁(yè)",
"pagePath": "pages/index/index",
"iconPath": "static/icon/tabBar/首頁(yè).png",
"selectedIconPath": "static/icon/tabBar/首頁(yè) (1).png"
}, {
"text": "我想要",
"pagePath": "pages/star/star",
"iconPath": "static/icon/tabBar/收藏.png",
"selectedIconPath": "static/icon/tabBar/收藏 (1).png"
}, {
"text": "消息",
"pagePath": "pages/message/message",
"iconPath": "static/icon/tabBar/消息.png",
"selectedIconPath": "static/icon/tabBar/消息 (1).png"
}, {
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "static/icon/tabBar/我的.png",
"selectedIconPath": "static/icon/tabBar/我的 (1).png"
}]
}
}
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-569193.html
同項(xiàng)目其他文章
該項(xiàng)目的其他文章請(qǐng)查看【易售小程序項(xiàng)目】項(xiàng)目介紹、小程序頁(yè)面展示與系列文章集合文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-569193.html
到了這里，關(guān)于【UniApp開發(fā)小程序】頂部導(dǎo)航欄和底部導(dǎo)航欄設(shè)置+iconfont圖標(biāo)引入的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
