微信小程序添加、删除class’
终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题。
今天第一天开发就遇到问题了。
项目需求,要一个平时的nav导航栏,这玩意用jQuery两行代码解决了,可是小程序不允许操作dom啊;
折腾一个多小时最终找到两种方法,分享给大家;
第一种比较直接但是,不适合多个操作;
1,第一种感觉比较傻
<view class="{{num==0 ? 'active':''}}" bindtap="click1"></view>
<view class="class{{num==1?'active':''}}"bindtap="click2"></view>
<view class=class="{{num==2 ? 'active':''}}" bindtap="click3"></view>
需要用到三目运算符,同时有多少个导航就要加多少事件。
click1:function(){
this.setData({
num:1,
num1:0,
num2:0
})
},
click2:function(){ this.setData({
num1:1,
num:0,
num2:0
})
},
click3:function(){
this.setData({
num2:1,
num1:0,
num:0
})
2,这种优化后感觉就不错了
<view data-num = "1" class='trsZhi {{_num==1?"trsActive":""}}' bindtap="tapHan">地址翻译</view>
<view data-num = "2" class='trsZhi {{_num==2?"trsActive":""}}' bindtap="tapHan" >机构翻译</view>
<view data-num = "3" class='trsZhi {{_num==3?"trsActive":""}}' bindtap="tapHan">人名翻译</view>
加一个data属性,只需要一个事件操作。
tapHan:function(e){
console.log(e.target.dataset.num)
this.setData({_num: e.target.dataset.num})
}
代码简洁多了,同时也可以选择默认第一个为active,只需要在data里面声明就行了
data: {
_num:"1"
},
微信小程序添加、删除class’的更多相关文章
- 微信小程序添加悬浮在线客服会话按钮
微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会 ...
- 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...
- 微信小程序添加外部地图服务数据
先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...
- 微信小程序添加卡券到微信卡包,使用wx.addCard()方法传参及整体流程
一.准备: 1.经微信认证过的微信公众号. 2.经微信认证过的微信小程序号. 先来看看微信小程序官方的文档,https://developers.weixin.qq.com/miniprogram/d ...
- 微信小程序添加背景图片的坑
给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客 https://blog.csdn.net/y ...
- 微信小程序—添加背景音乐
问题: 想在打开小程序时就自动播放背景音乐(循环) 解决方法: 1.思路:写一个函数,在 onLoad()中调用 2. //index.js //获取应用实例 const back = wx.get ...
- 微信小程序-添加手机联系人
仅供参考 1,wxml: <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2,js: data = ...
- 微信小程序:删除时提示是否删除
代码如下: wx.showModal({ title: '提示', content: '确定要删除吗?', success: function (sm) { if (sm.confirm) { // ...
- 微信小程序添加底部导航栏
修改 app.json 文件即可 "tabBar": { "selectedColor": "#1296db", "list&qu ...
随机推荐
- 如何连接远程redis,并且选择某个库进行操作
public static Jedis getJedis(){ Jedis jedis = new Jedis("222.201.145.215"); jedis.select(1 ...
- 规定CSS的属性仅在IE下生效 在非IE浏览器下不生效
css中判断IE版本的语句<!--[if gte IE 6]> Only IE 6/+ <![endif]-->: 1. <!--[if !IE]> 除IE外都可识 ...
- Vijos 1004 伊甸园日历游戏 博弈
描述 Adam和Eve玩一个游戏,他们先从1900.1.1到2001.11.4这个日期之间随意抽取一个日期出来.然后他们轮流对这个日期进行操作: 1 : 把日期的天数加1,例如1900.1.1变到19 ...
- dashDB - Creating a table with CLOB column type
In order to create a table with clob column type, the table has to be created with "ORGANIZE BY ...
- linux可用更新源
Kali 2.0更新源kali-rolling:#中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contribde ...
- C#.NET 中visual studio生成的.pdb/ .vshost.exe/ .vshost.exe.manifest文件是什么
pdb文件: 英文全称:Program Database File 中文全称:程序数据库 文件 Debug里的PDB是full,保存着调试和项目状态信息.有断言.堆栈检查等代码.可以对程序的调试配 ...
- 面向对象15.3String类-常见功能-获取-1
API使用: 查API文档的时候,有很多方法,首先先看返回的类型 下面的方法函数有的是有覆写Object类的如1.1图,如果没有复写的话是写在1.2图片那里的,如果找到了相对于的方法,可以点击进去可以 ...
- POJ 3126 math(BFS)
Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21581 Accepted: 11986 Desc ...
- 一步一步学Vue(四)
接上篇.上篇中给出了代码框架,没有具体实现,这一篇会对上篇定义的几个组件进行分别介绍和完善: 1.TodoContainer组件 TodoContainer组件,用来组织其它组件,这是react中推荐 ...
- unrecognized font family "iconfont2"
起因:使用React Native开发App,需要使用自定义字体iconfont2.ttf,要在xCode中引入该字体 步骤:将字体文件拷贝到项目工程中,在Info.plist文件中添加Fonts p ...