微信小程序-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】

❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。