微信公众号开发 媒体报道 媒体报道 微信公众平台推广
微信小程序开发 易企科技公司
易企科技公司 微信公众号开发
当前位置:易企科技公司 >> 媒体报道 >> 浏览文章
媒体报道

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

标签:程序,点击,控件,修改,改样,样式,式微 发布时间:2018年08月02日 点击128

如今要在微信小程序中实现点击控件修改样式,如下:微信小程序中不支撑直接操作dom果皮箱,要实现这种结果防静电标签网站建设公司,我们必要通过设置data,然后行使数据和界面的双向绑定来实现它。第一步:在wxss中定义被点击和未被点击的样式,  ...

           

             

               

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


微信小程序中不支撑直接操作dom网站排名,要实现这种结果,我们必要通过设置data,然后行使数据和界面的双向绑定来实现它。

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

[css] view plain copy print?
.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。如下:

[&#106avascript] view plain copy print?
data: {  
   isChecked: false  
 }  

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

[html] view plain copy print?
<view bindtap="serviceSelection"></view>  

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

[&#106avascript] view plain copy print?
serviceSelection(){  
   this.setData({  
     isChecked:true  
   })  
}  

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

[html] view plain copy print?
<view class="{{isChecked?'is_checked':'normal'}}" bindtap="serviceSelection"></view>  

重点是这一句代码

[html] view plain copy print?
{{isChecked?'is_checked':'normal'}}"  

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

相关新闻