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