微信小程序?qū)崿F(xiàn)點擊按鈕修改view標(biāo)簽背景顏色功能示例【附demo源碼下載】
本文實例講述了微信小程序?qū)崿F(xiàn)點擊按鈕修改view標(biāo)簽背景顏色功能。分享給大家供大家參考,具體如下:
1、效果展示
2、操作步驟:
① 數(shù)據(jù)綁定view樣式背景屬性值
② 通過邏輯文件設(shè)置該背景屬性初始值
③ 通過點擊按鈕修改背景屬性值
3、關(guān)鍵代碼
index.wxml文件:
<view style="background:{{viewBg}};color:white;height:100px;">我是view標(biāo)簽</view> <button type="default" bindtap="changeBg">點擊我修改view標(biāo)簽的背景顏色</button>
index.js文件:
var num=0; Page({ data:{ viewBg:'green' }, changeBg(){ num++; var result=num/2; if(num%2==0){ this.setData({ viewBg:'green' }) }else{ this.setData({ viewBg:'blue' }) } console.log(num) console.log(result) } })
代碼中通過設(shè)置num遞增數(shù),再針對每次的事件響應(yīng)進(jìn)行取余運算判定num的奇偶數(shù),進(jìn)而實現(xiàn)設(shè)置style="background:{{viewBg}};color:white;height:100px;"
中viewBg背景色值在綠色與藍(lán)色之間切換的效果。
4、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
js實現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法
這篇文章主要介紹了js實現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法,是非常實用的js窗口效果,需要的朋友可以參考下2015-03-03echarts同一頁面中四個圖表切換的js數(shù)據(jù)交互方法示例
這篇文章主要給大家介紹了關(guān)于echarts同一頁面中四個圖表切換的js數(shù)據(jù)交互的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),對大家的學(xué)習(xí)或者工作具有一定的幫助,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07GreyBox技術(shù)總結(jié)(轉(zhuǎn))
GreyBox是一個遮罩層的組件也稱模式窗口或模態(tài)窗口(所謂模態(tài)窗口,就是指除非采取有效的關(guān)閉手段,用戶的鼠標(biāo)焦點或者輸入光標(biāo)將一直停留在其上的窗口),它運行以后可以產(chǎn)生不錯的界面。2010-11-11