小程序是一種輕量化的應用,小程序的發展與人們生活節奏的快速變化密不可分。小程序能讓我們更方便、快捷地完成想要的功能,甚至可以實現許多網頁應用無法實現的功能。
在小程序開發中,經常需要通過CSS來控制頁面的樣式,同時也需要通過JS動態地生成頁面。但是,在小程序中使用CSS傳值時卻面臨一個問題,那就是CSS無法直接獲取JS傳遞的數據。
于是,就需要借助小程序提供的setData()方法。setData()方法可以將JS中的數據傳遞給WXML,WXML中再將數據傳遞給CSS。
// JS代碼 Page({ data: { fontsize: 16 }, onLoad: function (options) { this.setData({ fontsize: 18 }) } })
/* CSS代碼 */ font-size: {{fontsize}}px;
這里我們首先在JS中定義data中的fontsize值為16,在頁面加載完成后,調用setData()方法將fontsize的值改為18。然后在CSS中通過{{fontsize}}來獲取數據,并將值的單位設置為px。
通過這樣的方法,使得JS中的數據可以傳遞到CSS中,實現了小程序中CSS傳值的目的。
上一篇小程序css精靈圖
下一篇小程序點擊改變css