小程序-动态改变导航栏名字

一种方法是在页面的json文件中进行设置，如下：

{
  "navigationBarTitleText": "最新消息"
}

有时候，我们需要实现这样的需求：比如九宫格，点击每个格，跳转到同一个页面，只是展示的数据不同。

 这时候，导航栏没办法设置成静态的，如何设置成动态的？

1、跳转时，根据传递过来的参数获取到title值

2、调用API wx.setNavigationBarTitle设置标题

实例演示：

1、下面是首页面index，点击之后跳转到list，点击的时候向list页面传递了一个参数cat

<!-- 2 九宫格 -->
<view class="grids">
  <navigator class="item" 
    wx:for="{{categories}}" 
    wx:key="id" 
    url="/pages/list/list?cat={{item.id}}">
    <image src="{{item.icon}}" />
    <text>{{item.name}}</text>
  </navigator>
</view>

2、在list页面接收这个参数，请求后端数据，获取title值，即可实现动态改变

data: {
    category: {}, 
}

// 生命周期函数--监听页面加载
  onLoad(options) {
    fetch(`/categories/${options.cat}`)
      .then(res => {
        this.setData({
          category: res.data
        })
        
        // 1 页面首次渲染之后才可以执行
        // 2 这里不能确定一定是在onReady过后执行，取决于请求后端的速度
        // 3 因此需要在onReady中进行判断，完善逻辑
        wx.setNavigationBarTitle({
          title: res.data.name
        })

        this.loadMore()
      })
  },

// 生命周期函数--监听页面首次渲染完成
  onReady: function() {
    if (this.data.category.name) {
      wx.setNavigationBarTitle({
        title: this.data.category.name
      })
    }
  },