微信小程序初始化的标题我们知道实在全局.json文件中设置的,如果修改全局设置中的navigationBarTitleText,我们全部页面的标题都会统一改变:
例如:
"navigationBarTitleText": "个人中心",
在小程序中,每个页面都会单独一个文件夹,文件夹中包含四个文件,这四个文件紧密相连,都是为其中的.wxml服务,例如如下的目录结构:
Page
- example.js
- example.json
- example.wxml
- example.wxss
app.json
app.wxss
可是我们的小程序一般情况下不止一个页面的,如何动态设置单页面标题?了解了上面的微信小程序文件目录,我们可以利用下面两种方法动态设计页面标题。
一、在.json中设置在.json中设置中设置,这里指的是页面文件夹example.json中设置,用法就像在全局设置那样。例如:
{
"navigationBarTitleText": "个人中心"
}
(不过不知为什么我用这种方法不行,大神却可以,肯定是我的问题)
二、在.js中设置这里的.js文件也是单页面中的example.js文件,在页面加载时就动态更改页面wx.setNavigationBarTitle( )。
例如:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: "意见建议"
})
},
使用这种方法我可以动态更改微信小程序的标题,不过问题是每个页面都要写一次,变得只是title这个字符串,所以有没有方法只设置一次然后数据绑定动态变化?可以尝试一下。
我的方法是在全局app.js文件中设置加载函数:
onLoad: function (options) {
wx.setNavigationBarTitle({
title: pagetitle
})
},
然后在每个单独页面的js中(例如:example.js)设置data数据绑定:
data: {
pagetitle:个人中心,
},
【微信小程序如何动态修改页面标题——已解决】我的思路是这样,不过貌似不行,因为页面没有js之间没有关联起来。所以还是还需要继续优化。
推荐阅读
- 4种不同环境中引用公共模版的方式方法——vue和微信小程序
- 在微信小程序中添加字体图标的方法
- 如何成为JavaScript开发人员()
- AngularJS | ng-class-even指令用法示例
- 十大Kali Linux黑客工具推荐和介绍
- PHP Ds Vector count()函数用法介绍
- 算法设计(间隙缓冲区数据结构)
- C中的const限定符介绍和用法示例
- C ++中的函数重载介绍