小程序tab切换

WXML:

    
      {{item}} 
    


 
  1111111
  22222
  33333
  44444
  55555
  66666
  66666

JS:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    currentTab:0,
    menu:[
      '111',
      '222',
      '333',
      '444',
      '555',
      '666'
    ]  
    
  },
  changeCurrentTab(a){
    console.log(a.currentTarget.dataset.index);
    this.setData({
      currentTab : a.currentTarget.dataset.index
    })   
  }


})

setData({...},[callback])将数据从逻辑层发送到视图层（异步），同时也会改变对应的 this.data.XX 的值（同步）。

data中放的数据在页面初次渲染的时候使用， 不能直接通过this.data.xxx修改值后动态地渲染到页面，下面这样写虽然能改变currentTab的值，但是不会重新渲染到页面上！！！而且用setData()里面的变量可以先不在data中定义，我上面是为了给它赋一个初值为0，让刚进来默认第一个就是选中状态才定义的，但是用this.data必须先定义。

changeCurrentTab(a){
  console.log(a.currentTarget.dataset.index);
  this.data.currentTab = a.currentTarget.dataset.index;
},

WXSS:

.scroll-view_H{
  white-space: nowrap;
  margin-top: 30rpx;
}
.scroll-view-item_H{
  width: 150rpx;
  display: inline-block;
  text-align: center;
 
}
#tabWrap{
  width: 750rpx;
  margin-top: 20rpx;
  position: relative;

}
#tabWrap view{
  width:750rpx;
  height: 500rpx;
  position: absolute;
  top: 0;
  left: 0;
}
.bg-red{
  background: #ff0000;
}
.bg-green{
  background: #00ff00;
}
.bg-yellow{
  background: #ffff00;
}
.bg-blue{
  background: #0000ff;
}
.bg-pink{
  background: #ff80c2;
}
.bg-orange{
  background: #fd9d21;
}

.tabActive{
  color:#258c47;
}
.show{
  display: block;
}
.hidden{
  display: none;
}