微信小程序 实现点击添加移除class


Posted in Javascript onJune 12, 2017

微信小程序点击添加移除class类实现动态变化class

微信小程序 实现点击添加移除class

wxml:

<view class="location_bottom" hidden="" > 
   <view class="{{_num == 1?'add_citying':'add_city'}}" data-num = "1" bindtap="clickNum">北京</view> 
   <view class="{{_num == 2?'add_citying':'add_city'}}" data-num = "2" bindtap="clickNum">上海</view> 
 </view>

wxss:

.location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size:
 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid; padding: 0 20rpx; align-items: center;display: -webkit-flex;}
.add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx 
solid #ebebeb; color: #000000;margin-right: 20rpx; } 
.add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center;
 border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}

js:

Page({ 
 data: { 
  _num: 0,   
 }, 
 clickNum: function (e) { 
  console.log(e.target.dataset.num) 
  this.setData({ 
   _num: e.target.dataset.num 
  }) 
 }, 
 onLoad: function (options) { 
 
 } 
 
  
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 实现 原路返回
Jan 21 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
javascript对象的创建和访问
Mar 08 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 #Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 #Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 #Javascript
原JS实现banner图的常用功能
Jun 12 #Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 #Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 #Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
You might like
PHP5 安装方法
2007/01/15 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
限制文本字节数js代码
2007/03/06 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
python实现2048小游戏
2015/03/30 Python
浅谈Python中数据解析
2015/05/05 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python 列表推导式使用详解
2019/08/29 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
校园招聘策划书
2014/01/09 职场文书
协议书怎么写
2014/04/21 职场文书
宣传稿格式范文
2015/07/23 职场文书
《植树问题》教学反思
2016/03/03 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python