快捷導(dǎo)航

小程序中使用css var變量(使js可以動(dòng)態(tài)設(shè)置css樣式屬性)

更新時(shí)間：2020年03月31日 09:51:49 作者：天天修改

這篇文章主要介紹了小程序中使用css var變量，使js可以動(dòng)態(tài)設(shè)置css樣式屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

使用sass,stylus可以很方便的使用變量來(lái)做樣式設(shè)計(jì)，其實(shí)css也同樣可以定義變量，在小程序中由于原生不支持動(dòng)態(tài)css語(yǔ)法，so，可以使用css變量來(lái)使用開發(fā)工作變簡(jiǎn)單。

基本用法

基礎(chǔ)用法

<!--web開發(fā)中頂層變量的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; }

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

class="two" 對(duì)應(yīng)的節(jié)點(diǎn): 10px
class="three" 對(duì)應(yīng)的節(jié)點(diǎn): element: 2em
class="four" 對(duì)應(yīng)的節(jié)點(diǎn): 10px (繼承自父級(jí).two)
class="one" 對(duì)應(yīng)的節(jié)點(diǎn): 無(wú)效值, 即此屬性值為未被自定義css變量覆蓋的默認(rèn)值

上述是一些基本概念，大致說(shuō)明css變量的使用方法，注意在web開發(fā)中，我們使用:root來(lái)設(shè)置頂層變量，更多詳細(xì)說(shuō)明參考MDN的文檔

妙用css變量

開發(fā)中經(jīng)常遇到的問(wèn)題是，css的數(shù)據(jù)是寫死的，不能夠和js變量直通，即有些數(shù)據(jù)使用動(dòng)態(tài)變化的，但css用不了。對(duì)了，可以使用css變量試試呀

js

// 在js中設(shè)置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中設(shè)置的那些)賦值給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);
}

通過(guò)css變量就可以動(dòng)態(tài)設(shè)置css的屬性值

代碼片段

https://developers.weixin.qq.com/s/aWfUGCmG7Efe

github

小程序演示