相信大家一定会遇到小程序的主题配色问题,今天分享的内容主要就是如何根据自己的配置切换主题配色配图
1、确定好需要修改的部分,配置主题
// 可以配置在app.js里面 也可以配置在外层框架 在这里我是配置在app.js然后全局储存了
globalData: {
userInfo: null,
// 主题配色配置
theme:{
//顶部配色
navigationBarColor:"#df4ecd",
//图标配色
images:[
"../../images/addShop.png",
"../../images/yuyue.png"
],
// body 中含有亮粉的字体配色 ex: 产品活动价格 98
bodyFontColor:"#df4ecd",
// 各个栏目标题配色 ex: 活动产品 人员推荐 等
titleColor:"#e67dd8"
}
}
现在主题配置一目了然,然后进行数据绑定,可以通过修改如上配置进行全局的主题修改
2、修改顶部主题NavigationBarColor配色
wx.setNavigationBarColor
wx.setNavigationBarColor({
frontColor: '#ffffff', // 必写项
backgroundColor: app.globalData.theme.navigationBarColor, // 必写项 对应如上配置
animation: { // 可选项
duration: 400,
timingFunc: 'easeIn'
}
})
3、绑定page中各个需要变化的
*在这里我做了 图片的切换 文字字体颜色的切换 *
//page js 的配置
Page({
data: {
addImg:app.globalData.theme.images[0],
yyImg: app.globalData.theme.images[1],
fontColor: app.globalData.theme.bodyFontColor,
titleColor: app.globalData.theme.titleColor
}
//wxml 的绑定
<view class='tabHeaderLine' style='background:{{fontColor}}'></view>
<text style='color:{{titleColor}}'>优惠券领取</text>
<image class='addShop' src='{{addImg}}' />
<image class='yuyue' src='{{yyImg}}' />
*** 绑定之后 就可以试一下了 修改最上面的配置进行小程序的主题配色替换吧 ***
*** 哦 对了 如果有需要替换tabBar的配色的 可以根据小程序官方API就行替换 很详细的 ***