溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用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)的結果是：
上述是一些基本概念，大致說明css變量的使用方法，注意在web開發中，我們使用:root來設置頂層變量，更多詳細說明參考MDN的文檔
妙用css變量
開發中經常遇到的問題是，css的數據是寫死的，不能夠和js變量直通，即有些數據使用動態變化的，但css用不了。對了，可以使用css變量試試呀
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" > <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.com/s/aWfUGCmG7Efe
github
小程序演示
到此這篇關于小程序中使用css var變量的文章就介紹到這了,更多相關小程序使用css var變量內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
