애플릿 탭 전환

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의 값(동기화)입니다.
데이터에 저장된 데이터는 페이지가 처음 렌더링될 때 사용되며,this를 직접 통과할 수 없습니다.data.xxx는 값을 수정한 후 동적으로 페이지에 렌더링합니다. 다음은 이렇게 쓰여서currentTab의 값을 바꿀 수 있지만currentTab의 값을 다시 렌더링하지 않습니다!!!그리고 setData () 안의 변수를 사용하면 데이터에 정의되지 않을 수 있습니다. 첫 번째 값은 0입니다. 들어오자마자 기본적으로 첫 번째는 선택한 상태입니다.this를 사용합니다.데이터는 먼저 정의해야 합니다.

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;
}