在微信小程式中如何實作修改view標籤背景顏色

這篇文章主要介紹了微信小程式實現點擊按鈕修改view標籤背景顏色功能,涉及微信小程式事件回應及數值運算實現動態設定view背景色樣式的相關操作技巧,需要的朋友可以參考下

本文實例講述了微信小程式實作點擊按鈕修改view標籤背景顏色功能。分享給大家供大家參考，具體如下：

操作步驟：

#① 資料綁定view樣式背景屬性值
② 透過邏輯檔案設定此背景屬性初始值
③ 透過點選按鈕修改背景屬性值

關鍵程式碼

##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背景色值在綠色與藍色之間切換的效果。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在mongoose中有關於更新物件的詳細介紹

在JavaScript中如何實作AOP

使用nginx node如何部署https

在mongoose中有關於更新物件的詳細介紹

在JS函數中有關setTimeout詳細介紹#

以上是在微信小程式中如何實作修改view標籤背景顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！