uni-app 自定义导航栏图标+事件（一）

雨点打透心脏的1/2处 2022-12-07 15:07 717阅读 0赞

![2020091614002289.png][]

一、阿里巴巴矢量图选出自己想要的图标：[https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2][https_www.iconfont.cn_home_index_spm_a313x.7781069.1998910419.2]

添加到自己的项目里，下载至桌面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70][]

二、将解压好的项目打开，将两个文件复制到自己项目的static文件夹中：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 1][]

三、在page页面去使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 2][]

"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的文件，大小 ，颜色，位置正常写就是了

四、设置点击事件：在my页面中添加如下代码（与data和onload同级）：

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

[2020091614002289.png]: /images/20221123/f93ad16027f1453fa25975cb3f5577f3.png
[https_www.iconfont.cn_home_index_spm_a313x.7781069.1998910419.2]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70]: /images/20221123/157af66cd78c4b269816ca79273b5e0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 1]: /images/20221123/996c4a6b9d654a45beaf51ff22884b28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 2]: /images/20221123/274efa9b1eef44428fdbd2da20c79b1b.png