个性化阅读
专注于IT技术分析

微信小程序如何动态修改页面标题——已解决

微信小程序初始化的标题我们知道实在全局.json文件中设置的,如果修改全局设置中的navigationBarTitleText,我们全部页面的标题都会统一改变:

例如:

"navigationBarTitleText": "个人中心",

在小程序中,每个页面都会单独一个文件夹,文件夹中包含四个文件,这四个文件紧密相连,都是为其中的.wxml服务,例如如下的目录结构:

Page

  • example.js
  • example.json
  • example.wxml
  • example.wxss

app.js

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之间没有关联起来。所以还是还需要继续优化。

赞(0)
未经允许不得转载:srcmini » 微信小程序如何动态修改页面标题——已解决

评论 抢沙发

评论前必须登录!