微信小程序 页面跳转时导航栏标题显示加载中，结束时显示对应标题

效果图

第一步 ------------ 设置加载中的导航栏标题 （完整参考代码在对下面）

• 在当前页面的 json 中文件设置

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#000", //导航栏颜色
  "navigationBarTextStyle":"white",       //字体设置
  "navigationBarTitleText": "加载中..."      //在这里设置⬅⬅⬅⬅⬅⬅

}

第二步 ------------ 开启 loading 加载中标记

• 在当前页面的 js 文件中设置

onLoad: function (options) {
    wx.showNavigationBarLoading()
	... ...   //这里一般是请求函数，当这个函数请求结束以后进行下一步操作
}

第三步 ------------ 关闭 loading 加载中标记

• 如果是请求结束以后改变样式，就把它写在请求成功的函数里面，因为请求是异步执行的
• 也是在 onLoad 里面书写

      wx.hideNavigationBarLoading({     //按照顺序执行，一般是在请求以后进行关闭，再进行书写内容
        success: (res) => {},
      })

第三四步 ------------ 设置导航栏文字

      wx.setNavigationBarTitle({
        title:this.data.detail.title   //这个一般是动态的获取，一般在请求结束以后进行设置
      })

参考代码

// pages/detail/detail.js
import douban from "../../utils/douban"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    detail:[],
    photos:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.showNavigationBarLoading()   //loading 加载

    douban({
      url:"subject/"+options.id,
    }).then((res)=>{   //请求成功后执行的函数-----------------------------------
      console.log(res)
      this.setData({   //更改原始数据
        detail:res.data,
        photos:res.data.photos,
      })
      wx.hideNavigationBarLoading({   //loading 关闭
        success: (res) => {},
      })
      wx.setNavigationBarTitle({   //设置标题文字
        title:this.data.detail.title
      })
    })   //请求成功后执行的函数结尾----------------------------------------------
  },
})