uniapp導航欄配置自定義按鈕


此博客寫的很詳細了:https://www.cnblogs.com/xiaoyan2017/p/11531238.html

官方配置文檔詳見:https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons

貼代碼

{
	"path" : "pages/weshare/ws-index/ws-index",
	"style" : {
		"navigationBarTitleText": "微享WeShare",
		"enablePullDownRefresh":true,
		"app-plus": {
			"titleNView": {
				"buttons": [
					{
						"color":"#fff",
						"float":"right",
						"fontSize":"32px",
						"type": "menu",  //使用uniapp自帶的按鈕
                                                "signType": "menuBtn" 
//onNavigationBarButtonTap里會監聽出當前點擊的導航欄按鈕的配置對象,故這里可定義一個參數如signType,
//當監聽出點擊的按鈕對象時,可根據對象中的signType參數的值,判斷當前點擊的是哪一個按鈕
					},
					{
						"color":"#fff",
						"float":"right",
						"fontSize":"20px",
						"fontSrc":"/static/iconfont/iconfont.ttf",  //此處有說明,見下方
						"text": "\ue672",  //自定義按鈕
                                                "signType": "homeBtn"
					}
				]
			}
		}
	}	
},

關於iconfont.ttf文件的引用及說明

iconfont的引用詳見:https://www.cnblogs.com/huihuihero/p/12657945.html

unicode形式的使用說明:

如上圖,將 &#x 替換為 \u 即可。如 &#xe737 -> \ue737

unicode不生效的說明:
若新增了icon圖庫,並更新了iconfont.css和iconfont.ttf文件,則需要重新運行app基座才行,否則不生效。

關於導航欄自定義按鈕點擊事件的監聽

監聽按鈕、輸入框事件,uni-app給出了相應API,只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged,寫在響應的頁面中即可
//監聽原生導航欄按鈕點擊事件
onNavigationBarButtonTap(e){
	console.log(e)
},


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM