微信小程序?qū)崿F(xiàn)點擊按鈕修改view標簽背景顏色功能示例【附demo源碼下載】
更新時間：2017年12月06日 10:27:55 作者：FutrueJet
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕修改view標簽背景顏色功能,涉及微信小程序事件響應(yīng)及數(shù)值運算實現(xiàn)動態(tài)設(shè)置view背景色樣式的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序?qū)崿F(xiàn)點擊按鈕修改view標簽背景顏色功能。分享給大家供大家參考，具體如下：
1、效果展示
2、操作步驟：
① 數(shù)據(jù)綁定view樣式背景屬性值
② 通過邏輯文件設(shè)置該背景屬性初始值
③ 通過點擊按鈕修改背景屬性值
3、關(guān)鍵代碼
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)
}
})
代碼中通過設(shè)置num遞增數(shù)，再針對每次的事件響應(yīng)進行取余運算判定num的奇偶數(shù)，進而實現(xiàn)設(shè)置style="background:{{viewBg}};color:white;height:100px;"中viewBg背景色值在綠色與藍色之間切換的效果。
4、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
今天來聊一下JavaScript中的對象訪問器,JavaScript的主要功能之一是能夠定義對象,這些對象可以封裝屬性和方法,本文將深入探討 JavaScript 對象訪問器是什么、它是如何工作的以及使用對象訪問器的作用,需要的朋友可以參考下2024-06-06
JQuery 提供了兩種方式來阻止事件冒泡，Jquery阻止默認動作即通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認動作，下文有個不錯的示例，需要的朋友可以參考下2013-11-11
微信小程序?qū)崿F(xiàn)點擊導(dǎo)航標簽滾動定位到對應(yīng)位置
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點擊導(dǎo)航標簽滾動定位到對應(yīng)位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本文介紹了如何使用pdfmake第三方庫在項目中根據(jù)模板生成PDF文件,文中還提到了常用的配置,如頁眉和頁腳效果,對pdfmake pdf使用方法感興趣的朋友一起看看吧2024-09-09
JavaScript設(shè)計模式經(jīng)典之工廠模式
工廠模式定義一個用于創(chuàng)建對象的接口，這個接口由子類決定實例化哪一個類。接下來通過本文給大家介紹JavaScript設(shè)計模式經(jīng)典之工廠模式，感興趣的朋友一起學(xué)習吧2016-02-02
咱們都知道，在DOM事件模型中，有捕獲和冒泡兩個階段，而在IE事件模型中，只有冒泡階段。寫在html里的事件響應(yīng)函數(shù)只有在冒泡階段才會被執(zhí)行2009-09-09
js定時器setInterval、clearInterval的使用方法舉例
Javascript的setTimeOut和clearInterval函數(shù)應(yīng)用非常廣泛,它們都用來處理延時和定時任務(wù),這篇文章主要給大家介紹了關(guān)于js定時器setInterval、clearInterval使用方法的相關(guān)資料,需要的朋友可以參考下2023-11-11
微信小程序scroll-view點擊項自動居中效果的實現(xiàn)
這篇文章主要介紹了微信小程序scroll-view點擊項自動居中效果的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實例形式分析了javascript寄生組合式繼承的原理、定義與簡單使用方法,需要的朋友可以參考下2019-01-01
下面小編就為大家?guī)硪黄猨s 獲取本地文件及目錄的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11