溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-15 04:14:04 來源：腳本之家 閱讀：839 作者：FutrueJet 欄目：web開發(fā)

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

1、效果展示

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

2、操作步驟：

① 數(shù)據(jù)綁定view樣式背景屬性值
② 通過邏輯文件設(shè)置該背景屬性初始值
③ 通過點(diǎn)擊按鈕修改背景屬性值

3、關(guān)鍵代碼

index.wxml文件：

<view >我是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ù)，再針對(duì)每次的事件響應(yīng)進(jìn)行取余運(yùn)算判定num的奇偶數(shù)，進(jìn)而實(shí)現(xiàn)設(shè)置中viewBg背景色值在綠色與藍(lán)色之間切換的效果。

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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手