发布于 4年前

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

在微信小程序的开发中,如果页面的状态改变,需要动态的修改微信小程序的页面的标题,可以通过微信小程序提供的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)。

©2020 edoou.com   京ICP备16001874号-3