navigationBarTitle显示问题

  • • 发表于 8年前
  • • 作者 程序小当家
  • • 3960 人浏览
  • • 19 条评论
  • • 最后编辑时间 8年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

通过这个动态图你应该发现问题了,当点击测试进入电影界面时,title先显示了WeChat然后显示的电影,这个体验肯定是难以接受的,原因是电影界面的title是在js文件中page的生命周期方法中设置的。

Page({
  data: {},
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
    wx.setNavigationBarTitle({
      title: '电影'
    })
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

通过注释你应该明白了,设置标题写在了onReady方法中,也就是页面已经渲染完成了,在onReady之前显示的title就是json文件(覆盖关系,如果在子页面json文件设置title会覆盖app.json全局设置)中的title。可能你会说将wx.setNavigationBarTitle写在onLoad函数中,不过如果这样设置是不对的,因为onLoad执行过后才渲染页面,在渲染页面时title会从json文件中读取,导致onLoad设置的title会只在页面渲染之前展示,之后就显示json文件的tile,所以现在你应该明白ttle设置最优的地方就是给子文件写一个json文件,在文件中写入,如果想改变颜色直接在文件中添加就可以,该文件所写的属性值会覆盖app.json中设置的值。新建一个movie.json,

{
    "navigationBarTitleText": "电影"
}

最后看下效果图

这样是不是显示标题是不是比较符合了呀!

这个方法也是网络上看的,然后自己写了个例子验证了一下,在这个跟大家分享下。

分享到:
19条评论
Ctrl+Enter
作者

程序小当家

程序小当家

APP:1 帖子:9 回复:65 积分:6266

已加入社区[2942]天

主人太懒,签名没设置!

作者详情》
Top