微信小程序mpvue动态设置navigationBarTitle

静态设置导航栏标题

main.js

import Vue from 'vue'
import TestAudio from './TestAudio'

const app = new Vue(TestAudio)
app.$mount()

export default {
  config: {
    navigationBarTitleText: '测试播放'
  }
}

动态设置导航栏标题

这种一般是根据某个变化的参数来设置的，所以会有页面跳转和传参

页面跳转并传参

如下，我给跳转的页面传递了一个参数id，值为每项的title

<a class="circle-item" :href="'/pages/testAudio/main?id='+iconMap[key]['title']" :key="key" v-for="(idx, key) in iconMap">
  <span>{{iconMap[key]['title']}}</span>
</a>

iconMap: {
    'icon-caigou': {title: '美食', bk: '#EF8B3E'}, 
    'icon-shangpin': {title: '猫眼电影', bk: '#E4463B'},
    'icon-touchengkongyun': {title: '酒店住宿', bk: '#8B67E5'},
    'icon-daohang': {title: '休闲娱乐', bk: '#5DC7B0'},
    'icon-zitigui': {title: '外卖', bk: '#F3AE42'},
    'icon-jiesuan': {title: 'KTV', bk: '#5DC1A9'},
    '.icon-jijianfasong': {title: '丽人', bk: '#EC5B6E'},
    'icon-shoucang': {title: '景点门票', bk: '#5CA2F2'},
    'icon-baobiao': {title: '火车票', bk: '#FD9D21'},
    'icon-pifuzhuti': {title: '民宿', bk: '#BED300'},
},

动态设置标题

wx.setNavigationBarTitle({
  title: '当前页面'
})

接收参数并动态设置标题

TestAudio.vue

mounted () {
  // 参数
  console.log('params',this.$root.$mp.query.id)

  wx.setNavigationBarTitle({
    title: this.$root.$mp.query.id
  })
}

问题

会明显的看到标题的切换过程，就是如果从标题为测试跳转到美食，会看到标题发生以下变化
测试 -- 局部标题的名称 -- 美食
测试 -- 全局标题的名称 -- 美食
当你为页面设置了静态标题后，会看到局部导航栏的标题出现一瞬间
当你把静态标题注释后，会看到全局导航栏的标题出现一瞬间

解决

保留了页面的静态标题，并且将标题设置为空字符串。
效果为 测试 -- 空白 -- 美食

文档

wx.setNavigationBarTitle

网站导航

网站导航