uniapp 关于自定义原生头部添加自定义按钮 与 图标 并监听触发回调方法//

/**仅作为个人学习笔记记录**/

//在pages.json中
{
		"path": "pages/BusinessList/EnterpriseDetails",
		"style": {
			"navigationBarTitleText": "",
			"app-plus": {
				// "titleNView": true, //禁用原生导航栏 false禁用 true开启 
				"titleNView":{    //头部自定义icon图标 如文字将text中icon换成文字即可
					"buttons":[{
						"text":"\ue615",
						"fontSrc":"/static/fontCode.ttf",
						"fontSize":"12px"
					},{
						"text":"\ue645",
						"fontSrc":"/static/fontCode.ttf",
						"fontSize":"12px"
					}],
					"backButton":"#00ff00"
				},
				"bounce": "none" ,// 禁止回弹
			}
		}
	}
//详细参考 https://uniapp.dcloud.io/collocation/pages?id=pages

 

//在vue界面中方法如下 切记需与onload 同级
//点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
//textValues: ['\ue645', '\ue605'], // 1:收藏  0:为收藏 这是在我项目中的实例
	onNavigationBarButtonTap(e) { 
			let _self = this;
			console.log(e);
       //此方法 可动态修改原生头部图标 使用场景:收藏之类的
        var webview = _self.$mp.page.$getAppWebview();
			  webview.setTitleNViewButtonStyle(1, {
			  text: _self.textValues[_self.collectState]
			});
	},

//注意 引入icon库需保存在项目本地

demo地址:https://ext.dcloud.net.cn/plugin?id=1765

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐