uni-app custom navigation bar icon + event (1)

1. Choose the icon you want from the Alibaba vector graphics: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

Add to your own project, download to the desktop

2. Open the decompressed project and copy the two files to the static folder of your project:

3. Use it on the page page

"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. Points to pay attention to: the value of text is to find the corresponding icon in iconfont.css, column: (you must add u in front of e to display normally)

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

2. FontSrc imports the .ttf file, the size, color, and position can be written normally

4. Set the click event: add the following code to the my page ( same level as data and onload ):

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