1. 程式人生 > >uni-app 頂部導航點擊更換圖標

uni-app 頂部導航點擊更換圖標

log navig func else nav str string ext gif

更換頂部導航的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 把判斷結束

源碼已全部貼出!!!

uni-app 頂部導航點擊更換圖標