小程序进阶-如何使用var变量动态设置css样式

简介

想必大家在学习小程序之后都知道，wxml页面可以通过”{ {变量名}}“直接访问js文件定义的变量，从而达到动态设置页面显示或页面样式的目的。但是，大家是否知道wxss文件css样式也可以通过js文件进行动态设置？由于在小程序中不支持动态css语法，所以，我们可以使用css变量var来达到同样的目的。

示例代码

index.js

Page({
    
    
  data: {
    
    
  	param1: '20%',
  	param2: 'red',
  	param3: '300',
    style: `			//样式一
      --bg-color:red; 
      --border-radius:20%;
      --wid:300px;
      --hgt:300px;
      `
  },
  onLoad(){
    
    
    setTimeout(() => {
    
    
      this.setData({
    
    
      	param1: '50%',
      	param2: 'blue',
      	param3: '200',
        style: `			//样式二
        --bg-color:blue; 
        --border-radius:50%;
        --wid:200px;
        --hgt:200px;
        `
      })
    }, 2000);
  }
})

index.wxss

.my-test{
    
    
  width: var(--wid);
  height: var(--hgt);
  border-radius: var(--border-radius);
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--bg-color);
  transition: all 0.3s ease-in;
}

.my-test .show-test{
    
    
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}

index.wxml

<view class="container">
  <view class="my-test" style="{
       
       {
       
       style}}">
    <view class="show-test"></view>
  </view>
</view>
<!--或者这种形式-->
<view class="container">
  <view class="my-test" style="
  		--bg-color:{
       
       {
       
       param2}}; 
        --border-radius:{
       
       {
       
       param1}};
        --wid:{
       
       {
       
       param3}}px;
        --hgt:{
       
       {
       
       param3}px;
        ">
    <view class="show-test"></view>
  </view>
</view>

效果展示

样式一：

样式二：

参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties