PRODUCT NEWS
产品动态
返回上一级
小程序动态绑定样式
2023.01.06

现在要在微信小程序中实现点击控件修改样式,如下

976af0ed51b099c29f304bcccd68477e.png


第一步:在wxss中定义被点击和未被点击的样式,如下

.is_checked{
  border: 1px solid #FE0002 ;
  color: #FE0002 ;
  background: #fff;
}
.service_selection .normal{
  border: none;
  color: #333;
  background: #F0F1EC;
}

复制

第二步:在js文件中的data中设置一个flag,叫他isChecked,默认isChecked==false。如下:

data: {
    isChecked: false
  }

复制

第三步:在wxml文件中绑定点击事件,

 

复制

在js文件中实现这个方法,并另他点击后设置isChecked==true。如下:

  serviceSelection(){
      this.setData({
        isChecked:true
      })
  }

复制

第四步:依然是在wxml文件中进行数据绑定:

 

复制

重点是这一句代码

{{isChecked?'is_checked':'normal'}}"

复制

这是一个三目运算符,当isChecked==true时,在class加上is_checked的样式,为flase时使用normal的样式。这一点的实现类似php控制样式类名的语法。

产品动态
微信小程序等场景中已支持使用支付宝数币钱包支付
06-02 微信小程序等场景中已支持使用支付宝数币钱包支付
大人小店旗舰店微信小程序上线 多端模式再拓新路径
06-02 大人小店旗舰店微信小程序上线 多端模式再拓新路径
天猫上线微信小程序 “天猫超市小铛家”登录微信
06-02 天猫上线微信小程序 “天猫超市小铛家”登录微信