微信小程序實現點擊按鈕修改view標簽背景顏色功能示例【附demo源碼下載】
更新時間：2017年12月06日 10:27:55 作者：FutrueJet
這篇文章主要介紹了微信小程序實現點擊按鈕修改view標簽背景顏色功能,涉及微信小程序事件響應及數值運算實現動態(tài)設置view背景色樣式的相關操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序實現點擊按鈕修改view標簽背景顏色功能。分享給大家供大家參考，具體如下：
1、效果展示
2、操作步驟：
① 數據綁定view樣式背景屬性值
② 通過邏輯文件設置該背景屬性初始值
③ 通過點擊按鈕修改背景屬性值
3、關鍵代碼
index.wxml文件：
<view style="background:{{viewBg}};color:white;height:100px;">我是view標簽</view>
<button type="default" bindtap="changeBg">點擊我修改view標簽的背景顏色</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)
}
})
代碼中通過設置num遞增數，再針對每次的事件響應進行取余運算判定num的奇偶數，進而實現設置style="background:{{viewBg}};color:white;height:100px;"中viewBg背景色值在綠色與藍色之間切換的效果。
4、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
這篇文章主要介紹了js實現從中間開始往上下展開網頁窗口的方法,是非常實用的js窗口效果,需要的朋友可以參考下2015-03-03
這篇文章主要給大家介紹了關于echarts同一頁面中四個圖表切換的js數據交互的相關資料，文中給出了完整的示例代碼供大家參考學習，對大家的學習或者工作具有一定的幫助，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07
JavaScript函數柯里化是一種將接受多個參數的函數轉換為一系列接受單個參數的函數的技術。本文將通過簡單的示例為大家詳細講講函數柯里化的相關應用，需要的可以參考一下2023-04-04
這篇文章主要介紹了js分析url獲取url參數，可以獲取?前面部分、#及后面部分，大家看代碼吧2013-12-12
這篇文章主要為大家詳細介紹了localStorage實現便簽小程序的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要來和大家分享一下15個用于開發(fā)的TypeScript高級技巧，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-07-07
兼容火狐css控制超出部分用省略號代替2008-07-07
這篇文章主要介紹了javascript函數式編程,實例分析了javascript函數式編程的相關使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
GreyBox是一個遮罩層的組件也稱模式窗口或模態(tài)窗口（所謂模態(tài)窗口，就是指除非采取有效的關閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的窗口），它運行以后可以產生不錯的界面。2010-11-11
這篇文章主要介紹了JavaScript TAB欄切換效果的示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11