index.wxml代码

  1. <view class="tab-left" >
  2. <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="" data-id="" bindtap="tab">tab-hd01</view>
  3. <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="" data-id="" bindtap="tab">tab-hd02</view>
  4. <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="" data-id="" bindtap="tab">tab-hd03</view>
  5. <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="" data-id="" bindtap="tab">tab-hd04</view>
  6. </view>
  7.  
  8. <view class="tab-right">
  9. <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view>
  10. <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view>
  11. <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view>
  12. <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view>
  13. </view>

index.wxss代码

  1. .tab-left .active{color: #ff0000}
  2. .tab-right .right-item{display: none}
  3. .tab-right .right-item.active{display: block}

index.js代码

  1. Page({
  2. data:{
  3.  
  4. // tab 切换
  5. tabArr: {
  6. curHdIndex: ,
  7. curBdIndex:
  8. },
  9.  
  10. },
  11. //tab切换
  12. tab: function (e) {
  13. //var dataId = e.currentTarget.dataset.id;
  14. var dataId = e.currentTarget.id;
  15. var obj = {};
  16. obj.curHdIndex = dataId;
  17. obj.curBdIndex = dataId;
  18. this.setData({
  19. tabArr: obj
  20. })
  21. //console.log(e);
  22. },
  23.  
  24. })

参数传递

在view上绑定id和data-id 都可以传递两个参数,然后用bindtap绑定事件,就可以传递两个参数值

获取参数

用tab:function(e){}可以获取参数,可以console.log(e) 打印出来。用

  1. var dataId = e.currentTarget.dataset.id;
  2. var dataId = e.currentTarget.id;

就可以获取到两个不同的id参数

剩下的就可以为所欲为了

小程序的tab切换事件的更多相关文章

  1. 微信小程序写tab切换

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...

  2. 小程序之Tab切换(二)

    之前写的那个Tab切换是常规逻辑写的,接下来我会列出小程序api自带的写法,当然了 这个写法更加简单,实用.我们只需要配置app.json这个文件即可. 先看效果图: app.json代码:(有木有感 ...

  3. 小程序之 tab切换(选项卡)

    好久没有写东西了   今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view < ...

  4. 小程序之Tab切换

    小程序越来越火了,作为一名,额  有理想的攻城狮,当然要紧跟互联网时代的步伐啦,于是我赶紧抽时间学习了一下小程序的开发,顺便把经验分享给大家. 对于申请账号以及安装开发工具等,大家可以看官网:http ...

  5. 微信小程序之tab切换

    .wxml <view class="select_box"> <scroll-view scroll-x="true" style=&quo ...

  6. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  7. 微信小程序滚动tab的实现

    微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...

  8. 微信小程序滚动Tab选项卡:左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  9. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

随机推荐

  1. Java Web项目部署时 “Exploded Archive”模式部署时无效

    在myeclipse中部署项目时,当Deploy type为Exploded Archive(deveplopment mode)时,finish按钮为灰色,无法部署的解决方法: 1.project上 ...

  2. Swift is Now Open Source

    https://developer.apple.com/news/?id=12032015a Swift is Now Open Source December 3, 2015 Join the op ...

  3. # Writing your-first Django-app-part 5 -test

    确认bug 写test测试暴露bug 修复bug 更多测试例子 测试一个view The Django test client测试客户端. 提升DemoAppPoll/views.py 测试我们的vi ...

  4. FutureTask 源码分析

    FutureTask 源码分析,这个类的原理与我分析android当中的FutureTask类差不多[http://www.cnblogs.com/daxin/p/3802392.html] publ ...

  5. C# 不借助第三个变量实现两整数交换

    c#中实现两个int变量的数值互换,在借助第三个变量做临时载体的情况下,非常简单. ; ; int c ; c = a; a = b; b = c; 如果不借助第三方变量,有几种实现的方法: 1.异或 ...

  6. Mysql5.7主主互备安装配置

    一.安装说明 ======================================================================================= 环境:   ...

  7. k8s 题目

    这几个月参与了几场面试,设计了多道面试题,觉得可以综合考察应聘人对 kubernetes的掌握情况.在这里分享下,供应聘人自查以及其他面试官参考. 这些面试题的设计初衷并不是考察 kubernetes ...

  8. $(window).height() 和 $(document).height()的区别

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  9. HBase Rowkey的散列与预分区设计

    转自:http://www.cnblogs.com/bdifn/p/3801737.html 问题导读:1.如何防止热点?2.如何预分区?扩展:为什么会产生热点存储? HBase中,表会被划分为1.. ...

  10. Ubuntu下允许Root用户的操作 (图形界面登录、su切换……)

    Ubuntu安装后,root用户默认是被锁定了的,不允许登录,也不允许“su”到 root.虽然这样的设置使安全性更高一些,但对于开发者来 说就显得很不方便了.如何让Ubuntu允许root用户直接登 ...