需求: 根据后台返回的 主题色和主题背景 动态设置样式
如果是简简单单的可以直接操作的style 就不足为虑
style="background-color:{{data.background_color ? data.background_color :'#181C2A'}}"
但是不排除某些在组件上不能直接操作的、加以修改的存在
于是乎搜罗了一种解决方法
举个栗子,如下:
在js中
Page({
data: {
theme: {
style: ''
}
},
})
...
//简简单单赋个值 属性名 如 --color
let primary_color = `--color:` +( res.data.primary_color || `#50b7c1`)
this.setData({
'theme.style': primary_color,
})
...
在wxml中
<!--将css变量赋值给style-->
<view class="themeView" style="{{theme.style}}">
</view>
在wxss中
/* 使用var */
.themeView{
color: var(--color);
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。