小程序tab切换

WXML:

<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <block wx:for="{{menu}}" wx:key="menu">
      <!-- 加了data-前缀会在currentTarget的dataset中找到index属性(可以不叫index) -->
      <view class="scroll-view-item_H {{currentTab==index? 'tabActive' : ''}}" ontap="changeCurrentTab" data-index="{{index}}">{{item}}</view> 
    </block>
</scroll-view>

<view id="tabWrap"> 
  <view class="bg-red {{currentTab==0? 'show' : 'hidden'}}">1111111</view>
  <view class="bg-yellow {{currentTab==1? 'show' : 'hidden'}}">22222</view>
  <view class="bg-green {{currentTab==2? 'show' : 'hidden'}}">33333</view>
  <view class="bg-pink {{currentTab==3? 'show' : 'hidden'}}">44444</view>
  <view class="bg-orange {{currentTab==4? 'show' : 'hidden'}}">55555</view>
  <view class="bg-blue {{currentTab==5? 'show' : 'hidden'}}">66666</view>
  <view class="bg-blue  {{currentTab==5? 'show' : 'hidden'}}">66666</view>
</view>

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

猜你喜欢