uni-app 顶部导航点击更换图标

更换顶部导航的iconfont.ttf图标，先在配置文件配置好按钮：

pages.json文件

"buttons": [
{
"text": "\ue63d",
"fontSrc": "/static/iconfont.ttf",
"fontSize": "22px",
"color":"#fc455d",
"float":"left"
}
]

然后在当前的vue页面的生命周期里面获取到当前点击的按钮，把text里面的图标代码更改掉就可以了：

生命周期：

onNavigationBarButtonTap:function(btn){
if(btn.index == 0){
let pages = getCurrentPages();
let page = pages[pages.length - 1];
// #ifdef APP-PLUS
let currentWebview = page.$getAppWebview();
let titleObj = currentWebview.getStyle().titleNView;
console.log(1);
console.log(JSON.stringify(titleObj.buttons[0]));
if (!titleObj.buttons) {
return;
}
if(titleObj.buttons[0].text == '\ue63d'){
titleObj.buttons[0].text = "\ue602";
}else{
titleObj.buttons[0].text = "\ue63d";
}
currentWebview.setStyle({
titleNView: titleObj
});
// #endif
}

}

 别忘了用// #endif 把判断结束

源码已全部贴出！！！

转载于:https://www.cnblogs.com/Yong0921/p/10672092.html