小程序中使用css var變量，使js能夠動態設置css樣式屬性

使用sass,stylus能夠很方便的使用變量來作樣式設計，其實css也一樣能夠定義變量，在小程序中因爲原生不支持動態css語法，so，能夠使用css變量來使用開發工做變簡單。

基本用法

基礎用法

<!--web開發中頂層變量的key名是:root，小程序使用page-->
page { 
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
}

提高用法

<div class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

.two { --test: 10px; }
.three { --test: 2em; }

在這個例子中，var(--test)的結果是：

class="two" 對應的節點: 10px
class="three" 對應的節點: element: 2em
class="four" 對應的節點: 10px (繼承自父級.two)
class="one" 對應的節點: 無效值, 即此屬性值爲未被自定義css變量覆蓋的默認值

上述是一些基本概念，大體說明css變量的使用方法，注意在web開發中，咱們使用:root來設置頂層變量，更多詳細說明參考MDN的 文檔

妙用css變量

開發中常常遇到的問題是，css的數據是寫死的，不可以和js變量直通，即有些數據使用動態變化的，但css用不了。對了，能夠使用css變量試試呀

wxml

js

// 在js中設置css變量
let myStyle = `
--bg-color:red; 
--border-radius:50%;
--wid:200px;
--hgt:200px;
`

let chageStyle = `
--bg-color:red; 
--border-radius:50%;
--wid:300px;
--hgt:300px;
`
Page({
  data: {
    viewData: {
      style: myStyle
    }
  },
  onLoad(){
    setTimeout(() => {
      this.setData({'viewData.style': chageStyle})
    }, 2000);
  }
})

wxml

<!--將css變量(js中設置的那些)賦值給style-->
<view class="container">
  <view class="my-view" style="{{viewData.style}}">
    <image src="/images/abc.png" mode="widthFix"/>
  </view>
</view>

wxss

/* 使用var */
.my-view{
  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-view image{
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}

經過css變量就能夠動態設置css的屬性值

代碼片斷

https://developers.weixin.qq....

github

小程序演示