终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题。

今天第一天开发就遇到问题了。

项目需求,要一个平时的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’的更多相关文章

  1. 微信小程序添加悬浮在线客服会话按钮

    微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会 ...

  2. 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  3. 微信小程序添加外部地图服务数据

    先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...

  4. 微信小程序添加卡券到微信卡包,使用wx.addCard()方法传参及整体流程

    一.准备: 1.经微信认证过的微信公众号. 2.经微信认证过的微信小程序号. 先来看看微信小程序官方的文档,https://developers.weixin.qq.com/miniprogram/d ...

  5. 微信小程序添加背景图片的坑

    给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客  https://blog.csdn.net/y ...

  6. 微信小程序—添加背景音乐

    问题:  想在打开小程序时就自动播放背景音乐(循环) 解决方法: 1.思路:写一个函数,在 onLoad()中调用 2. //index.js //获取应用实例 const back = wx.get ...

  7. 微信小程序-添加手机联系人

    仅供参考 1,wxml: <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2,js: data = ...

  8. 微信小程序:删除时提示是否删除

    代码如下: wx.showModal({ title: '提示', content: '确定要删除吗?', success: function (sm) { if (sm.confirm) { // ...

  9. 微信小程序添加底部导航栏

    修改 app.json 文件即可 "tabBar": { "selectedColor": "#1296db", "list&qu ...

随机推荐

  1. man ssh翻译(ssh命令中文手册)

    本文为命令ssh的man文档翻译,翻译了90%的内容,剩余是一些没必要翻译的东西,请见谅. 如此文有所疑惑,希望我的另一篇文章能解惑: SSH(1)                    BSD Ge ...

  2. 设置select标签的高度

    当无法给select标签设置高度的时候,给他加一个背景色,就可以设置了.

  3. 将HTML导出生成word文档

    前言: 项目开发中遇到了需要将HTML页面的内容导出为一个word文档,所以有了这边随笔. 当然,项目开发又时间有点紧迫,第一时间想到的是用插件,所以百度了下.下面就介绍两个导出word文档的方法. ...

  4. Chrome浏览器扩展开发系列之四:Browser Action类型的Chrome浏览器扩展

    Browser Action类型的Google Chrome扩展程序,通常在Chrome浏览器的工具栏中,地址栏的右侧,有一个始终存在的图标.也就是说,这个图标与浏览器相关,只要安装了该Chrome扩 ...

  5. 大数据平台常见异常-zookeeper

    本文主要阐述大数据平台环境zookeeper常见异常和解决方案 1.Connection reset by peer异常 异常说明 我们现在项目有个任务OneMinuteDataSync是用spark ...

  6. Java 异常Exception e中e的getMessage()和toString()以及 e.printStackTrace();方法的区别

    Exception e中e的getMessage()和toString()方法的区别: 示例代码1: public class TestInfo {     private static String ...

  7. Hadoop的介绍、搭建、环境

    HADOOP背景介绍 1.1Hadoop产生背景 HADOOP最早起源于Nutch.Nutch的设计目标是构建一个大型的全网搜索引擎,包括网页抓取.索引.查询等功能,但随着抓取网页数量的增加,遇到了严 ...

  8. Ambari 2.4.2 汉化

    1.ambari-web (1)apache-ambari-2.4.2-src/ambari-web/app/messages.js 该文件是KeyValue文件,3000多行.将Value部分翻译成 ...

  9. css display:box 新属性

    一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...

  10. Android - Fragment (三)不同Fragment之间的通信

    在Fragment的java文件中,可以使用getActivity()来获得调用它的activity, 然后再找到另一个Fragment,进行通信 getActivity().getFragmentM ...