uniapp 关于自定义原生头部添加自定义按钮 与 图标 并监听触发回调方法
uniapp 关于自定义原生头部添加自定义按钮 与 图标 并监听触发回调方法///**仅作为个人学习笔记记录**///在pages.json中{"path": "pages/BusinessList/EnterpriseDetails","style": {"navigationBarTitleText": "","app-plus": {// "titleNView": true, //禁用原生
·
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库需保存在项目本地
更多推荐
已为社区贡献3条内容
所有评论(0)