小程序黑白风格切换交互代码

APP比比小程序的黑白切换风格是放在自定义头部导航组件中的,这里我用到了组件中的通信传值bind:myevent事件来实现。

首先通过创建skin.wxss定义两种风格下关于颜色属性的样式,包括字体颜色(color)、边框颜色(border-color)以及背景色(background-color)

然后全局app.js以及页面中onLoad、onShow中对页面、头部导航、底部导航、顶部胶囊进行样式的控制即可。

这里,我输出了一份带自定义头部导航和自定义底部Tabbar导航风格切换的代码片段,提供三个菜单页和一个用户中心页体验供大家学习参考。(点击下方的获取代码片段导入开发者工具中即可查看效果)