微信小程序点击控件修改样式实例详解


Posted in Javascript onJuly 07, 2017

微信小程序点击控件修改样式实例详解

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

微信小程序点击控件修改样式实例详解

微信小程序中不支持直接操作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控制样式类名的语法。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 #Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 #Javascript
protractor的安装与基本使用教程
Jul 07 #Javascript
vue.js实例todoList项目
Jul 07 #Javascript
微信JSAPI Ticket接口签名详解
Jun 28 #Javascript
Angular.js自动化测试之protractor详解
Jul 07 #Javascript
vue.js全局API之nextTick全面解析
Jul 07 #Javascript
You might like
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Python是什么 Python的用处
2020/05/26 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
工程造价与管理专业应届生求职信
2013/11/23 职场文书
大学生演讲稿范文
2014/01/11 职场文书
四查四看剖析材料
2014/02/14 职场文书
三项教育活动实施方案
2014/03/30 职场文书
父母寄语大全
2014/04/12 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年手术室工作总结
2015/05/11 职场文书
原告代理词范文
2015/05/25 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书