小程序的tab切換事件

index.wxml代碼

<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參數

 

剩下的就能夠隨心所欲了