mpvue小程序动态修改小程序每个页面的导航栏背景颜色、导航栏标题颜色、导航栏标题文字内容、窗口的背景色、

原创

于 2018-09-04 16:02:56 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#mpvue 动态修改导航条 #setNavigationBarTitle #mpvue setNavigationBarTitle

本文介绍了如何在mpvue小程序中利用微信小程序API动态修改每个页面的导航栏背景颜色、标题颜色和文字内容，以及窗口的背景色。在最新版的mpvue中，传统的在main.js中设置导航条样式的方法已不再适用，现在推荐使用API如setNavigationBarTitle进行动态配置。

mpvue目前版本，动态修改小程序中导航条文字，颜色，背景的操作方式是下面这种方法，采用了微信小程序api方法；之前在main.js方法中设置的方式以及不生效了。

<template>
  <div>
    这里是html
  </div>
</template>

<script>
export default {
    created(){

    },
    onLoad(){
        wx.setNavigationBarTitle({
          title:'修改后的导航',
        })
        wx.setNavigationBarColor({
          frontColor:'#ffffff',//前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 (微信小程序官方规定)
          backgroundColor: