小程序的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参数

剩下的就可以为所欲为了