小程序切换主题配色 |
您所在的位置：网站首页 › 墙身大样图图解 › 小程序切换主题配色 |
|
相信大家一定会遇到小程序的主题配色问题，今天分享的内容主要就是如何根据自己的配置切换主题配色配图
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 的绑定 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |