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

效果图

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

在当前页面的 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 }) }) //请求成功后执行的函数结尾---------------------------------------------- }, })