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


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 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
jqTransform美化表单
Oct 10 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
Yii2.0表关联查询实例分析
2016/07/18 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
理解JS事件循环
2016/01/07 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
python定时执行指定函数的方法
2015/05/27 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python实现Windows电脑定时关机
2018/06/20 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python扫描线填充算法详解
2020/02/19 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
车间机修工岗位职责
2014/02/28 职场文书
老干部工作先进事迹
2014/08/17 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
MySQL分区以及建索引的方法总结
2022/04/13 MySQL