uni-app 頂部導航點擊更換圖標
阿新 • • 發佈:2019-04-08
log navig func else nav str string ext gif 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
}
}
更換頂部導航的iconfont.ttf圖標,先在配置文件配置好按鈕:
pages.json文件
"buttons": [
{
"text": "\ue63d",
"fontSrc": "/static/iconfont.ttf",
"fontSize": "22px",
"color":"#fc455d",
"float":"left"
}
]
然後在當前的vue頁面的生命周期裏面獲取到當前點擊的按鈕,把text裏面的圖標代碼更改掉就可以了:
生命周期:
onNavigationBarButtonTap:function(btn){
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) {
}
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 頂部導航點擊更換圖標