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


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小数计算出现近似值的解决办法
Feb 06 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 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 时间日期操作实战
2011/08/26 PHP
php实现webservice实例
2014/11/06 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
javascript中的new使用
2010/03/20 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
详解Python编程中包的概念与管理
2015/10/16 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python 处理数据的实例详解
2017/08/10 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
报纸媒体创意广告词
2014/03/17 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
理解python中装饰器的作用
2021/07/21 Python
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python