微信小程序动态修改页面标题

时间:2021-03-25 17:50:35

在微信小程序的开发中,如果页面的状态改变,需要动态的修改微信小程序的页面的标题,可以通过微信小程序提供的API,wx.setNavigationBarTitle来实现动态的修改微信小程序的页面标题。

静态设置页面标题

在对应页面的json文件里面加入下面代码就可以实现页面标题的设置:

{
"navigationBarTitleText": "当前页标题"
}

动态设置页面标题

下面是动态修改微信小程序的页面标题的示例:

onLoad:  () {
var sign = 1;
var times = setInterval((){
if(sign > 10 )
{
clearInterval(times);
}
else{
var tmpTitle = '微信小程序的页面标题' + sign++;
wx.setNavigationBarTitle({
title: tmpTitle,
success: (){
console.log("当前微信小程序的页面标题为"" + tmpTitle + """ );
},
complete: (){
console.log("动态修改微信小程序的页面标题-complete");
}
});
}
}, 1000);
}

关键的操作是wx.setNavigationBarTitle({ title: tmpTitle })。

wx.setNavigationBarTitle的API也支持在执行修改小程序页面标题的成功、失败和完成的状态的回调事件。

注意wx.setNavigationBarTitle要在onready之后设置(onload也是在onready)。