微信小程序-bindtap事件点击改变样式

系统管理员 2023-07-17 02:55 147阅读 0赞

uu 方式一：采用三目运算数据绑定方式改变样式

<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上绑定样式名称

<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"
        })
      }  
    })

方式三：

当想要在原样式上新增样式，或者覆盖样式，也可以直接这样样式绑定；

<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中，通过三目运算方式；但此方式对后期维护不太友好，建议不推荐使用；例如：

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