微信小程序动态设置导航栏标题的实现步骤

网友投稿 696 2023-11-10

目录前言使用配置文件配置导航栏标题实现步骤效果图总结

前言

哈喽大家好,本期是微信小程序专栏第十八期。本期主要内容是动态设置导航栏标题。导航栏是页面最顶部的一块区域。本期使用两种方法来实现动态导航栏标题的设置,分别是使用配置文件配置导航栏标题和使用wx.setNavigationBarTitle(OBJECT)设置导航栏。

每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~

使用配置文件配置导航栏标题

微信小程序动态设置导航栏标题的实现步骤

这种方法是使用app.json或者页面的json文件配置导航栏标题。如果是在app.json中进行配置,则它是全局行为,项目所有的页面将显示同一个标题;如果是在页面的json中进行配置,则只会影响当前页面。

实现步骤

这里我们设置window的app.json为例。使用navigationBarBackgroundColor设置导航栏的颜色,使用navigationBarTitleText指定导航栏标题文字,使用navigationBarTextStyle指定导航栏标题文字的颜色。

注意:navigationBarTextStyle只支持black和white两个颜色,默认值为black。

效果图

保存后就会发现所有页面的导航栏都是一样的,如果不同页面需要使用不同的导航栏,则只需在页面的json中添加相应属性即可。

使用wx.setNavigationBarTitle(OBJECT)设置导航栏

这个方法可以使导航栏的文字根据页面内容的不同而变化。小程序提供了wx.setNavigationBarTitle(OBJECT)来动态设置导航栏标题。官方文档指出,页面的导航栏标题必须在页面生命周期的onReady之后来设置,否则无效。

如下,我们在post-detail.js中添加如下代码。其中wx.setNavigationBarTitle方法接收一个object参数。

效果图

保存代码,就可以发现页面的导航栏文字变成了文章的标题。

总结

您可能感兴趣的文章:微信小程序实现的动态设置导航栏标题功能示例微信小程序教程系列之设置标题栏和导航栏(7)

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:uniapp微信小程序自定义导航栏的全过程
下一篇:微信小程序http连接访问解决方案的示例
相关文章

 发表评论

暂时没有评论,来抢沙发吧~