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


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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
vuex存取值和映射函数使用说明
Jul 24 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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
javascript读取xml
2006/11/04 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
python在协程中增加任务实例操作
2021/02/28 Python
售后服务科岗位职责范文
2013/11/13 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
行政办公室岗位职责
2014/03/18 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
店铺转让协议书
2015/01/29 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技