微信小程序> 微信小程序点击控件修改样式

微信小程序点击控件修改样式

浏览量:843 时间: 来源:Tiramisu_C

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


微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它。

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


.service_selection .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文件中绑定点击事件,

 view bindtap="serviceSelection"/view

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

  serviceSelection(){      this.setData({        isChecked:true      })  }
第四步:依然是在wxml文件中进行数据绑定:

 view class="{{isChecked?'is_checked':'normal'}}" bindtap="serviceSelection"/view

重点是这一句代码

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






版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎