微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar

时间：2024-02-15 22:47:12

在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar)

但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译，运行时哪怕你修改了里面的值，也是不起做作用的.

不过官方提供了动态修改两个样式的api.

动态修改NavigationBar

wx.setNavigationBarColor({
   frontColor:"#ffffff",
   backgroundColor:\'#000000\'
});

 

动态修改TabBar

wx.setTabBarStyle({
  color: \'#FF0000\',
  selectedColor: \'#00FF00\',
  backgroundColor: \'#0000FF\',
  borderStyle: \'white\'
});

wx.setTabBarItem({
  index: 0,
  text: \'text\',
  iconPath: \'/path/to/iconPath\',
  selectedIconPath: \'/path/to/selectedIconPath\'
});

官方接口地址 

官方提供的其他接口