小程序的tab切换事件
2017-12-19 10:08
155 查看
index.wxml代码
index.wxss代码
index.js代码
参数传递
在view上绑定id和data-id 都可以传递两个参数,然后用bindtap绑定事件,就可以传递两个参数值
获取参数
用tab:function(e){}可以获取参数,可以console.log(e) 打印出来。用
就可以获取到两个不同的id参数
剩下的就可以为所欲为了
<view class="tab-left" > <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="1" data-id="1" bindtap="tab">tab-hd01</view> <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="2" data-id="2" bindtap="tab">tab-hd02</view> <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="3" data-id="3" bindtap="tab">tab-hd03</view> <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="4" data-id="4" 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: 0, curBdIndex: 0 }, }, //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参数
剩下的就可以为所欲为了
相关文章推荐
- 微信小程序之swiper制作tab切换效果
- Linux下实现Mac下QuickSilver那样的一键切换程序(代替Alt-Tab键)
- 微信小程序实现滴滴导航tab切换效果
- WX小程序TAB栏切换 / 小程序商品分类
- flex 4 TabNavigator 切换触发事件
- 微信小程序滚动Tab选项卡:左右可滑动切换
- linux fedora 24 设置 virtualbox 虚拟机程序 alt+tab 可切换 (键盘非独占)
- 微信小程序之Tab切换
- 微信小程序 swiper制作tab切换实现附源码
- 选项卡(Tab)切换效果与关联事件处理实现
- 切换tab按钮事件模块化
- 微信小程序 tab切换
- 微信小程序实现tab和swiper切换结合效果viewpage+tab效果
- Extjs 中Tabpanel使用以及tab切换事件
- 微信小程序滚动Tab选项卡:左右可滑动切换
- MFC TabView 切换事件(OnChangeActiveTab)
- PB tab open事件无法切换页面
- 微信小程序之tab切换效果
- Atitit.ALT+TAB没反应车and 点击任务栏程序闪烁可是不能切换
- 微信小程序之切换页签tab