微信小程序动态更改标题栏_微信小程序动态改变导航栏标题和背景颜色

1、动态的改变标题字体和背景颜色

.wxml文件：

改变标题1

改变标题2

改变标题3

.wxss文件：

button{margin: 10px}

.js文件：

Page({

data: {},

modalcnt1: function() {

wx.setNavigationBarTitle({

title: ‘——百家号(标题1)——‘,});

},

modalcnt2: function() {

wx.setNavigationBarTitle({

title: ‘******百家号(标题2)******’,});

},

modalcnt3: function() {

wx.setNavigationBarTitle({

title: ‘++++++百家号(标题3)++++++’,});

},})

2、动态的改变标题背景颜色

.wxml文件：

改变标题背景颜色为米白

改变标题背景颜色为灰色

改变标题背景颜色为雅红

.wxss文件：

button{margin: 10px}

.js文件：

const app = getApp()

Page({

data: {},

modalcnt1: function() {

wx.setNavigationBarColor({

frontColor: ‘#000000′,

backgroundColor: ‘#ffa’,

animation: {

duration: 500,

timingFunc: ‘linear’}});},

modalcnt2: function() {

wx.setNavigationBarColor({

frontColor: ‘#000000′,

backgroundColor: ‘#ccc’,

animation: {

duration: 500,

timingFunc: ‘linear’}});},

modalcnt3: function() {

wx.setNavigationBarColor({

frontColor: ‘#000000′,

backgroundColor: ‘#f20′,

animation: {

duration: 500,

timingFunc: ‘linear’}});},})