小程序的tab切换事件
index.wxml代码
- <view class="tab-left" >
- <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="" data-id="" bindtap="tab">tab-hd01</view>
- <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="" data-id="" bindtap="tab">tab-hd02</view>
- <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="" data-id="" bindtap="tab">tab-hd03</view>
- <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="" data-id="" bindtap="tab">tab-hd04</view>
- </view>
- <view class="tab-right">
- <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view>
- <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view>
- <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view>
- <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view>
- </view>
index.wxss代码
- .tab-left .active{color: #ff0000}
- .tab-right .right-item{display: none}
- .tab-right .right-item.active{display: block}
index.js代码
- Page({
- data:{
- // tab 切换
- tabArr: {
- curHdIndex: ,
- curBdIndex:
- },
- },
- //tab切换
- tab: function (e) {
- //var dataId = e.currentTarget.dataset.id;
- var dataId = e.currentTarget.id;
- var obj = {};
- obj.curHdIndex = dataId;
- obj.curBdIndex = dataId;
- this.setData({
- tabArr: obj
- })
- //console.log(e);
- },
- })
参数传递
在view上绑定id和data-id 都可以传递两个参数,然后用bindtap绑定事件,就可以传递两个参数值
获取参数
用tab:function(e){}可以获取参数,可以console.log(e) 打印出来。用
- var dataId = e.currentTarget.dataset.id;
- var dataId = e.currentTarget.id;
就可以获取到两个不同的id参数
剩下的就可以为所欲为了
小程序的tab切换事件的更多相关文章
- 微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
- 小程序之Tab切换(二)
之前写的那个Tab切换是常规逻辑写的,接下来我会列出小程序api自带的写法,当然了 这个写法更加简单,实用.我们只需要配置app.json这个文件即可. 先看效果图: app.json代码:(有木有感 ...
- 小程序之 tab切换(选项卡)
好久没有写东西了 今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view < ...
- 小程序之Tab切换
小程序越来越火了,作为一名,额 有理想的攻城狮,当然要紧跟互联网时代的步伐啦,于是我赶紧抽时间学习了一下小程序的开发,顺便把经验分享给大家. 对于申请账号以及安装开发工具等,大家可以看官网:http ...
- 微信小程序之tab切换
.wxml <view class="select_box"> <scroll-view scroll-x="true" style=&quo ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 微信小程序滚动tab的实现
微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...
- 微信小程序滚动Tab选项卡:左右可滑动切换
最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...
- 微信小程序-滚动Tab选项卡
前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...
随机推荐
- Java Web项目部署时 “Exploded Archive”模式部署时无效
在myeclipse中部署项目时,当Deploy type为Exploded Archive(deveplopment mode)时,finish按钮为灰色,无法部署的解决方法: 1.project上 ...
- Swift is Now Open Source
https://developer.apple.com/news/?id=12032015a Swift is Now Open Source December 3, 2015 Join the op ...
- # Writing your-first Django-app-part 5 -test
确认bug 写test测试暴露bug 修复bug 更多测试例子 测试一个view The Django test client测试客户端. 提升DemoAppPoll/views.py 测试我们的vi ...
- FutureTask 源码分析
FutureTask 源码分析,这个类的原理与我分析android当中的FutureTask类差不多[http://www.cnblogs.com/daxin/p/3802392.html] publ ...
- C# 不借助第三个变量实现两整数交换
c#中实现两个int变量的数值互换,在借助第三个变量做临时载体的情况下,非常简单. ; ; int c ; c = a; a = b; b = c; 如果不借助第三方变量,有几种实现的方法: 1.异或 ...
- Mysql5.7主主互备安装配置
一.安装说明 ======================================================================================= 环境: ...
- k8s 题目
这几个月参与了几场面试,设计了多道面试题,觉得可以综合考察应聘人对 kubernetes的掌握情况.在这里分享下,供应聘人自查以及其他面试官参考. 这些面试题的设计初衷并不是考察 kubernetes ...
- $(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...
- HBase Rowkey的散列与预分区设计
转自:http://www.cnblogs.com/bdifn/p/3801737.html 问题导读:1.如何防止热点?2.如何预分区?扩展:为什么会产生热点存储? HBase中,表会被划分为1.. ...
- Ubuntu下允许Root用户的操作 (图形界面登录、su切换……)
Ubuntu安装后,root用户默认是被锁定了的,不允许登录,也不允许“su”到 root.虽然这样的设置使安全性更高一些,但对于开发者来 说就显得很不方便了.如何让Ubuntu允许root用户直接登 ...