在做微信小程序换皮肤的时候,需要动态修改菜单栏(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.data里定义切换图片的地址和切换的标识 data:{ show:true, yes:"http://101.89.144.168:9090//files/jk/yd/images/in ...

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

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

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

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

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

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

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

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

  8. 微信小程序踩坑集合

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

  9. 微信小程序之换肤的功能

    pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...

随机推荐

  1. WebDataGrid设置某行某列的值

    <ig:WebDataGrid ID="grid"  OnRowSelectionChanged="grid_RowSelectionChanged" O ...

  2. Spring总结——AOP、JDBC和事务的总结

    1.上一次总结了 Spring 的核心三大组件(Core,Beans,Context),今天总结的 AOP.JDBC和事务都可以看成是核心三大组件的应用. 其中 Spring 的事务管理又以 AOP ...

  3. Java与.NET DES加密解密互转

    上代码: Java代码: import javax.crypto.Cipher; import javax.crypto.SecretKey; import javax.crypto.SecretKe ...

  4. jquery div层级选择器

    div id="modelName" class="modelName"> <!-- 车系的层 --> <div name=" ...

  5. KVC与KVO理解

    转载:https://magicalboy.com/kvc_and_kvo/ KVC 与 KVO 理解 KVC 与 KVO 是 Objective C 的关键概念,个人认为必须理解的东西,下面是实例讲 ...

  6. 关于RESTful接口api的设计

    你封装api的话,你对同城,你相当于客户端,你只顺应他的签权机制:别人调你的话,你有一套签权机制,别人就是客户端,只顺应你的签权:这样就统一了,容易扩展,以后你接了几套签权,别人对你还是一套,你们就是 ...

  7. [LeetCode] 206. Reverse Linked List_Easy tag: Linked List

    Reverse a singly linked list. Example: Input: 1->2->3->4->5->NULL Output: 5->4-> ...

  8. Linux SSH免登陆配置步骤

    [jans@centos2 ~]# cd ~[jans@centos2 ~]# ssh-keygen -t rsa  //生成rsa加密的公钥和密钥[jans@centos2 ~]# cat .ssh ...

  9. IE 兼容一问题一小记

    记录一下上一周做的一个门户网站!因为兼容问题折腾了我一天时间,今天有空了就把其中坑记录一下! 1.轮换效果不能显示出1.2.3... (ie7不行,大于ie7的可以),原因就是因为,js对象的最一个个 ...

  10. Mongodb 主从同步

    第一步:我们把mongodb部署多服务器上10.12.0.3和10.14.0.1. 第二步:启动10.12.0.3上的mongodb,把该数据库指定为主数据库 先启动主: mongod --port ...