小程序的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 ...
随机推荐
- tomcat8.5性能优化
主要是按照两篇文章,部分参数因适配Tomcat8.5进行了调整 一.有关 JAVA_OPTS http://www.open-open.com/lib/view/open1401931407228.h ...
- 对象序列化为何要定义serialVersionUID的来龙去脉
在很多应用中,需要对某些对象进行序列化,让它们离开内存空间,入住物理硬盘,以便长期保存.比如最常见的是Web服务器中的Session对象,当有10万用户并发访问,就有可能出现10万个Session对象 ...
- log4e下载地址
Log4e的插件的下载地址:log4e.jayefem.de/content/view/3/1/
- java replace方法 无法改变原字符串,使用时需重新赋值
// TODO:把网页中的链接替换为本地路径及文件名 for (String link : links) { String baseLink = "http://localhost:91/q ...
- 命令行下mysql新建用户及分配权限
创建用户: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username – 你将创建的用户名, host – 指定该用户在哪 ...
- win 安装pip和requests
下载地址是:https://pypi.python.org/pypi/pip#downloads : 下载完成之后,解压到一个文件夹,用CMD控制台进入解压目录,输入: python setup.py ...
- slf4j+log4j2 pom配置
<!-- log start --> <dependency> <groupId>org.slf4j</groupId> <artifactId& ...
- ajax 多个参数问题,如何既能表单序列化获取,又能加参数,加全部代码
$.param({'address':address,'delivity':delivity,'payment':payment}) + '&' + $('#card_form').ser ...
- Centos7下安装运行keepalived
master服务器ip地址:192.168.0.182 slave服务器ip地址:192.168.0.189 虚拟ip(VIP,一个尚未占用的内网ip即可)地址:192.168.0.180 确认使用 ...
- WebSocket和Socket的区别
前段时间写了两篇介绍HTTP和WebSocket的文章,回复中有人说希望了解下WebSocket和Socket的区别.这个问题之前也有想过,自己对此是有大概的答案,可是并不太确定,于是去搜集了些资料( ...