微信小程序点击控件修改样式实例详解
更新时间：2017年07月07日 10:07:05 投稿：lqh
这篇文章主要介绍了 微信小程序点击控件修改样式实例详解的相关资料,需要的朋友可以参考下
微信小程序点击控件修改样式实例详解
现在要在微信小程序中实现点击控件修改样式，如下：
微信小程序中不支持直接操作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控制样式类名的语法。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了微信小程序实现拖拽 image 触摸事件监听的实例的相关资料,这里提供image触摸并监听的简单实例，需要的朋友可以参考下2017-08-08
这篇文章主要介绍了微信小程序 简单教程实例详解的相关资料,这里对开发微信小程序步骤做了一一详解，需要的朋友可以参考下2017-01-01
这篇文章主要介绍了TypeScript遍历对象属性的问题，文章围绕TypeScript遍历对象属性的相关资料展开详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了JavaScript递归,递归就是当一个函数可以调用自己，那么这个函数就是递归，接下俩我们就来看看下面文章的详细介绍内容，需要的小伙伴可以参考一下，希望对你有所帮助2021-12-12
这篇文章主要介绍了微信小程序教程之本地图片上传(leancloud)实例详解的相关资料,这里举例说明该如何实现和实例代码，文章一一表述，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了uniApp学习之热门搜索,搜索数据页面缓存实例,需要的朋友可以参考下2023-10-10
这篇文章主要介绍JS正则RegExp对象，正则表达式是描述字符模式的对象，用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。下面就来看具体详情,需要的朋友可以参考一下2021-10-10
three.js-结合dat.gui实现界面可视化修改及调试详解
这篇文章主要为大家介绍了three.js-结合dat.gui实现界面可视化修改及调试详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了JavaScript ES新特性块级作用域，所谓的块级作用域，就是该变量只能在声明时的代码块或者子代码块中使用，使JavaScript出现了块级作用域，具体详细内容请参考下面文章内容2021-12-12
这篇文章主要为大家介绍了dotenv源码解读从.env文件中读取环境变量示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论