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


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 delete操作符应用实例
Jan 13 Javascript
js自定义事件代码说明
Jan 31 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
利用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
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
对命令行模式与python交互模式介绍
2018/05/12 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
实习生自我评价
2014/01/18 职场文书
优秀护士演讲稿
2014/04/30 职场文书
关爱老人标语
2014/06/21 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
出生证明格式
2015/06/15 职场文书
结婚幸福感言
2015/08/01 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL