快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改view標(biāo)簽背景顏色功能示例【附demo源碼下載】

更新時(shí)間：2017年12月06日 10:27:55 作者：FutrueJet

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改view標(biāo)簽背景顏色功能,涉及微信小程序事件響應(yīng)及數(shù)值運(yùn)算實(shí)現(xiàn)動(dòng)態(tài)設(shè)置view背景色樣式的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改view標(biāo)簽背景顏色功能。分享給大家供大家參考，具體如下：

1、效果展示

2、操作步驟：

① 數(shù)據(jù)綁定view樣式背景屬性值
② 通過(guò)邏輯文件設(shè)置該背景屬性初始值
③ 通過(guò)點(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)
  }
})

代碼中通過(guò)設(shè)置num遞增數(shù)，再針對(duì)每次的事件響應(yīng)進(jìn)行取余運(yùn)算判定num的奇偶數(shù)，進(jìn)而實(shí)現(xiàn)設(shè)置style="background:{{viewBg}};color:white;height:100px;"中viewBg背景色值在綠色與藍(lán)色之間切換的效果。

4、源代碼點(diǎn)擊此處本站下載。

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript對(duì)象訪問(wèn)器的工作原理及使用方法
今天來(lái)聊一下JavaScript中的對(duì)象訪問(wèn)器,JavaScript的主要功能之一是能夠定義對(duì)象,這些對(duì)象可以封裝屬性和方法,本文將深入探討 JavaScript 對(duì)象訪問(wèn)器是什么、它是如何工作的以及使用對(duì)象訪問(wèn)器的作用,需要的朋友可以參考下
2024-06-06
js阻止冒泡及jquery阻止事件冒泡示例介紹
JQuery 提供了兩種方式來(lái)阻止事件冒泡，Jquery阻止默認(rèn)動(dòng)作即通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作，下文有個(gè)不錯(cuò)的示例，需要的朋友可以參考下
2013-11-11
微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航標(biāo)簽滾動(dòng)定位到對(duì)應(yīng)位置
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航標(biāo)簽滾動(dòng)定位到對(duì)應(yīng)位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
pdfmake生成pdf的使用方法
本文介紹了如何使用pdfmake第三方庫(kù)在項(xiàng)目中根據(jù)模板生成PDF文件,文中還提到了常用的配置,如頁(yè)眉和頁(yè)腳效果,對(duì)pdfmake pdf使用方法感興趣的朋友一起看看吧
2024-09-09
JavaScript設(shè)計(jì)模式經(jīng)典之工廠模式
工廠模式定義一個(gè)用于創(chuàng)建對(duì)象的接口，這個(gè)接口由子類決定實(shí)例化哪一個(gè)類。接下來(lái)通過(guò)本文給大家介紹JavaScript設(shè)計(jì)模式經(jīng)典之工廠模式，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
javascript事件問(wèn)題
咱們都知道，在DOM事件模型中，有捕獲和冒泡兩個(gè)階段，而在IE事件模型中，只有冒泡階段。寫在html里的事件響應(yīng)函數(shù)只有在冒泡階段才會(huì)被執(zhí)行
2009-09-09
js定時(shí)器setInterval、clearInterval的使用方法舉例
Javascript的setTimeOut和clearInterval函數(shù)應(yīng)用非常廣泛,它們都用來(lái)處理延時(shí)和定時(shí)任務(wù),這篇文章主要給大家介紹了關(guān)于js定時(shí)器setInterval、clearInterval使用方法的相關(guān)資料,需要的朋友可以參考下
2023-11-11
微信小程序scroll-view點(diǎn)擊項(xiàng)自動(dòng)居中效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序scroll-view點(diǎn)擊項(xiàng)自動(dòng)居中效果的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
JavaScript寄生組合式繼承原理與用法分析
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實(shí)例形式分析了javascript寄生組合式繼承的原理、定義與簡(jiǎn)單使用方法,需要的朋友可以參考下
2019-01-01
js 獲取本地文件及目錄的方法(推薦)
下面小編就為大家?guī)?lái)一篇js 獲取本地文件及目錄的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11