uni-app自定義導(dǎo)航欄右側(cè)做增加按鈕并跳轉(zhuǎn)鏈接功能
更新時間：2022年03月09日 10:30:46 作者：洪洪呀
這篇文章主要介紹了uni-app自定義導(dǎo)航欄右側(cè)做增加按鈕并跳轉(zhuǎn)鏈接,本文通過實例代碼給大家分享實現(xiàn)思路，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
uni-app自定義導(dǎo)航欄右側(cè)做增加按鈕并跳轉(zhuǎn)鏈接
uni-app 在頁面上的導(dǎo)航欄右側(cè)做一個增加的圖標(biāo) 并實現(xiàn)跳轉(zhuǎn)
1. 先看效果圖
2. 實現(xiàn)思路
使用阿里圖標(biāo)庫的字體圖標(biāo), 下載放入本地文件 pages頁面引入即可 這里說一句 uni-app 不支持在線圖標(biāo) 所以需要下載下來
引入到本地項目中
3. pages.json文件中配置
如果是要放在左邊 改float : left 即可
4.page的代碼
{
"path": "pages/repairOrder/repairOrder",
"style": {
"navigationBarTitleText": "維修接單",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": {
"buttons": [
{
"text": "",
"fontSrc": "/static/iconfont/iconfont.ttf",
"fontSize": "23",
"float": "right"
}
]
}
}
}
}
5.點擊按鈕后跳轉(zhuǎn)事件
onNavigationBarButtonTap(e) {
uni.navigateTo({
url: `/pages/repairOrder/orderSave`
})
},可以打印e出來看具體參數(shù) 有問題評論區(qū)
到此這篇關(guān)于uni-app自定義導(dǎo)航欄右側(cè)做增加按鈕并跳轉(zhuǎn)鏈接的文章就介紹到這了,更多相關(guān)uni-app自定義導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Javascript運行機制之Event Loop，在學(xué)習(xí)Event Loop前，首先需要了解的幾個概念Javascript是單線程、任務(wù)隊列、同步任務(wù)、異步任務(wù)、Javascript執(zhí)行棧，下面來看看文章的詳細(xì)介紹吧2021-12-12
這篇文章主要介紹了leaflet加載geojson疊加顯示功能代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解 javascript對象創(chuàng)建模式的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript的相關(guān)知識。感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript簡單下拉菜單特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))
這篇文章主要介紹了JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【四】Bootstrap圖標(biāo)的提取和利用
通過本文主要介紹如何提取Bootstrap的圖標(biāo)信息，存儲到數(shù)據(jù)庫里面為我所用，非常具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要介紹了常見的javascript跨域通信方法2015-12-12
看似簡單的加法運行，卻有很多問題，一定要注意字符與數(shù)字的運算，注意使用js的強制類型轉(zhuǎn)換，否則會出現(xiàn)很多問題。我們在編寫js的過程中，最好通過alert逐行測試2013-11-11
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)鼠標(biāo)跟隨小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了webpack進(jìn)階——緩存與獨立打包的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08