在做微信小程序换皮肤的时候,需要动态修改菜单栏(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'
});

官方接口地址

官方提供的其他接口

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

  1. 微信小程序 主题皮肤切换(switch开关)

    示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...

  2. 微信小程序的页面跳转==编程式导航传参 和 标签的方法传参==以及如何过去传递过来的参数

    小程序导航传参接收传递过来的参数 在onload中 实例

  3. 微信小程序云开发-云函数-云函数实现数据的查询、修改和删除功能

    一.云函数获取商品信息 1.创建云函数getData,云函数功能:获取商品信息 2.在本地小程序页面调用云函数getData  二.云函数修改商品信息 1.创建云函数updateData,云函数功能: ...

  4. 微信小程序使用三元表达式切换图片

    1.data里定义切换图片的地址和切换的标识 data:{ show:true, yes:"http://101.89.144.168:9090//files/jk/yd/images/in ...

  5. 微信小程序——选中状态的切换

    加入购物车的时候,往往会有产品相关属性的选择,比如:尺寸,规格等.像我做的项目中,就有一个门店的选择,如下图: 我们如何做到当前点击的这个高亮呢?今天就讲一下如何实现这个功能. 思路: 1.定义一个高 ...

  6. 微信小程序:选项卡页面切换

    一.功能描述 在同一个页面内实现不同展示页面的切换功能,如下图所示 二.代码实现 1. index.js Page({ /** * 页面的初始数据 */ data: { currentData : 0 ...

  7. 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据(附源代码)

    这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴,懒的小伙伴们可以直接拿来用,喜欢的点个支持 <view> <view class=" ...

  8. 微信小程序实现tab页面切换功能

    wxml <scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

随机推荐

  1. Linux(Ubuntu)使用日记------tenserflow安装(pip安装法)

    其实步骤是很简单的,只是一开始在网上找了一份错误的教程的原因,掉入了坑. 安装过程: 1. 检查pip版本 pip3 -V 要求使用最新版的pip 9.0.1,如果不是,按照下面的方法安装最新的pip ...

  2. MySQL-ERROR 2003

    1.首先安装mysqld服务器,输入命令:mysqld --install 2.输入命令:mysqld --initialize-insecure 3.输入命令:net start mysql

  3. LODOP、C-Lodop简短排查语句

    https使用,故障:1.是https网站吗,https扩展版C-Lodop如何使用 参考http://www.c-lodop.com/faq/pp32.html2.双击桌面上的c-lodop快捷方式 ...

  4. 尝试dapper和postgresql

    大多数地方和其他数据库(MySQL)没有什么不同.只有几点要注意: 1.PostgreSQL表名和字段是区分大小写的,大小写不对会说字段不存在 2.插入Json数据时,要在字符串后面加上::json ...

  5. mpvue——动态渲染echarts图表

    前言 使用mpvue-echarts来写图表,那个F2再提醒自己下要踩坑不能忘记.遇到了一个问题就是数据不能动态的去渲染,这个其实官方给了我们对应的方法 懒加载 代码 修改了调用initChart() ...

  6. Day 4 测试(QwQ 表示没考好 未完待续。。。 可能要过一段时间才会更

    #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...

  7. ueditor 插件集成到 xadmin 中的相关操作

    安装 点击这里下载源码包 在相关的虚拟环境下安装源码方式安装 切入解压后路径进行 python setup.py install 注册 安装成功按照普通app一般注册在 django 程序的app 中 ...

  8. CF226D The table

    题目链接 题意 给出一个\(n\times m\)的矩阵,可以把某些行和某些列上面的数字变为相反数.问修改那些行和哪些列可以使得所有行和所有列之和都为非负数. 思路 每次将负数的行或者列变为相反数.因 ...

  9. 10分钟快速搞定pandas

    本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook .习惯 ...

  10. Pandas系列(十六)- 你需要学会的骚操作

    pandas有一种功能非常强大的方法,它就是accessor,可以将它理解为一种属性接口,通过它可以获得额外的方法.其实这样说还是很笼统,下面我们通过代码和实例来理解一下. pd.Series._ac ...