微信小程序 简单的换肤
程序员文章站
2022-05-05 22:03:24
...
微信小程序 简单的换肤
以两套皮肤为例:红色和绿色
两套要切换的图标分别放在两个文件夹中
img_h:
img_l:
确定两套主题颜色
#DE3C33
#02A95C
通过app.js控制
globalData: {
userInfo: null,
skin:{
file:"../img_h",//../img_l
color:"#DE3C33"//#02A95C
}
}
运用到页面
js:
Page({
data: {
skin:getApp().globalData.skin,
},
onLoad: function () {
// 动态设置 tabBar 的整体样式
wx.setTabBarStyle({
selectedColor: slet.data.skin.color//tab 上的文字选中时的颜色
})
//设置 tabBar 某一项的内容
wx.setTabBarItem({
index: 0,//tabBar 的哪一项,从左边算起
selectedIconPath: '/pages/' + slet.data.skin.file + '/homet-active.png'//选中时的图片路径
})
//页面导航条颜色
wx.setNavigationBarColor({
frontColor:"#ffffff",
backgroundColor:slet.data.skin.color
})
},
})
wxml:
<view style="color:{{skin.color}}">
文字
</view>
<image src="{{skin.file}}/aaa@qq.com"/>
看看效果
本人学习前端一年,努力努力再努力