小程序是近年來非常流行的一種輕量級應用類型,它兼具App與網頁的優點,具有快速、簡潔、易用等優勢。作為開發者,我們需要不斷探索該應用類型的各種功能,包括如何點擊修改頁面樣式。
在小程序開發中,我們需要使用WXML和WXSS來分別編寫頁面結構和樣式。要實現點擊改變CSS的效果,我們需要通過JS來動態修改WXSS里的CSS屬性。
具體步驟如下:
//在WXML中,添加一個按鈕元素//在WXSS中,定義背景色的初始狀態 .background{ background-color: #fff; } //在JS文件中,定義changeColor函數,并在其中修改背景色 Page({ //頁面數據 data: { background: '#FFF' }, //按鈕點擊事件 changeColor: function(){ //隨機生成顏色 var colors = ['#FFC0CB', '#EEE8AA', '#ADD8E6', '#FFA07A', '#20B2AA']; var index = Math.floor(Math.random()*colors.length); //根據index來修改data里的background屬性,實現動態效果 this.setData({ background: colors[index] }) } })
以上代碼可以實現點擊按鈕后,頁面背景色會隨機切換成預先設定好的五種顏色之一。
通過以上操作,我們可以輕松實現小程序的動態效果,給用戶帶來更好的使用體驗。
下一篇小程序 顏色漸變css