uni-app カスタム ナビゲーション バー アイコン + イベント (1)

1. Alibaba のベクター グラフィックから希望のアイコンを選択します: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

独自のプロジェクトに追加し、デスクトップにダウンロードします

2. 解凍されたプロジェクトを開き、2 つのファイルをプロジェクトの静的フォルダーにコピーします。

3. ページ内で使用する

"titleNView":{
	"type":"default",
	"buttons":[{
		"text": "\ue618",
		"fontSrc": "/static/font/iconfont.ttf",
		"fontSize": "22px",
		"color":"#fff",
		"float": "right"
	},{
		"text": "\ue607",
		"fontSrc": "/static/font/iconfont.ttf",
		"fontSize": "22px",
		"color":"#fff",
		"float": "left"
	}]
}

1. 注意すべき点: text の値は、iconfont.css の列: (正常に表示するには、e の前に u を追加する必要があります) で対応するアイコンを見つけることです。

.iconshezhi:before {
  content: "\e618"; /* 使用：\ue618 */
}

2. FontSrcは.ttfファイルをインポートし、サイズ、色、位置を通常通り書き込むことができます

4. クリック イベントを設定します。次のコードをマイ ページに追加します ( data および onload と同じレベル)。

export default {
		data() {
			return {
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.float=='right'){
			console.log("你点击了设置")
			}else{
			console.log("你点击了扫一扫")
			}
		},
		methods: {
		}
	}