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


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笔记一 js以及json基础使用说明
May 22 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
vue-swiper的使用教程
Aug 30 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
JavaScript 绘制饼图的示例
Feb 19 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函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
chrome调试javascript详解
2015/10/21 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
angularjs实现的前端分页控件示例
2017/02/10 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python 容器总结整理
2017/04/04 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
舞蹈教育学专业推荐信
2013/11/27 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年个人总结范文
2015/03/09 职场文书