微信小程序-bindtap事件點擊改變樣式

uu 方式一：採用三目運算數據綁定方式改變樣式

<!--page.vxml--> 
 <view class="middle">
    <view class="{{isChecked?'oldClass':'newClass'}}" bindtap="changeClass">快點擊我，翻臉給你看</view>
  </view>

//page.js
Page({
  data: {
  // 一開始，我們將isChecked設爲true，通過isChecked?'oldClass':'newClass'得知，未點擊時效果爲oldClass
   isChecked: true
  },
  // 當點擊以後， 由true變爲false，通過isChecked?'oldClass':'newClass'得知，點擊以後的效果爲newClass
  changeClass: function(){  
    this.setData({
      isChecked: false
    })
  }  
})  

方式二：直接在class上綁定樣式名稱

<!--vxml--> 
 <view class="middle">
    <view class="{{isChecked}}" bindtap="changeClass">快點擊我，翻臉給你看</view>
  </view>

//page.js

Page({
  data: {
    //默認oldClass樣式，當點擊時，將newClass 賦值給isChecked
    isChecked:"oldClass"
  },
  changeClass: function(){  
    this.setData({
      isChecked:"newClass"
    })
  }  
})

 方式三：

        當想要在原樣式上新增樣式，或者覆蓋樣式，也可以直接這樣樣式綁定；

<!--page.vxml--> 
 <view class="middle">
    <view class="oldClass {{isChecked}}" bindtap="changeClass">快點擊我，翻臉給你看</view>
  </view>

//page.js

Page({
  data: {
    //默認oldClass樣式，當點擊時，將newClass賦值給 isChecked 即新舊樣式疊加
    isChecked:''
  },
  changeClass: function(){  
    this.setData({
      isChecked:'newClass'
    })
  }  
})

方式四：

       對於改變控件樣式，我們還可以把樣式直接寫在style中，通過三目運算方式；但此方式對後期維護不太友好，建議不推薦使用；例如：

<!--page.vxml--> 
 <view class="middle">
    <view class="class" style="{{isChecked?'color:red':'color:green'}}" bindtap="changeClass">快點擊我，翻臉給你看</view>
  </view>

//page.js

Page({
  data: {
    isChecked:true
  },
  changeClass: function(){  
    this.setData({
      isChecked:false
    })
  }  
})

❤如果文章對您有所幫助，就在文章的右上角或者文章的末尾點個贊吧！(づ￣ 3￣)づ

❤如果喜歡大白兔分享的文章，就給大白兔點個關注吧！(๑′ᴗ‵๑)づ╭❤～

❤對文章有任何問題歡迎小夥伴們下方留言或者入羣探討【羣號：708072830】

❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。