研究目标：

在我们使用微信小程序时，我们发现经常碰到使用菜单按键来切换swiper页。如下所示

那么我们如何实现tab与swiper-item的绑定呢？

代码实现

首先我们在page页的js文件内的data中设置声明变量tab

然后在wxml文件中的tab子项目中绑定tab赋值函数selectTab，再为子项目设置不同的tab的值。

接着在js中声明selectTab函数并打印值。

打印结果：

我们可以看到e.currentTarget.dataset.tab的值，再通过this.Dataset存到data中的tab中。

为了能够直观的看到我们选择的键，在这里实现选中的效果。

为tab写一个隐藏的类，通过tab的值来判断该盒子的类是否为空

接着我们在swiper中绑定tab的值，以及我们需要在swiper切换时也能反映到tab上。所以我们这里也绑定一个tab赋值函数daTabChange。

在js中声明函数daTabChange，并打印

可以看到a.detail.current的值成功打印，再通过this.Dataset存到data中的tab中。

这时就实现的tab与swiper-item的关联。

完整代码

html:

 <view class="page_hd">
    <view class="zh_tab">
      <view class="zh_tab__item" 
      bindtap="selectTab" data-tab="0">
        <view class="{{tab == 0 ? 'zh_tab__item-on': ''}}">热榜</view>       
      </view>
      <view class="zh_tab__item"
      bindtap="selectTab" data-tab="1">
        <view class="{{tab == 1 ? 'zh_tab__item-on': ''}}">推荐</view>
      </view>
    </view>
  </view>
  <view class="page_bd">
    <swiper current="{{tab}}" bindchange="doTabChange">
      <swiper-item>
        热榜页
      </swiper-item>
      <swiper-item>
        推荐页
      </swiper-item>
    </swiper>
  </view>

css:

.page_hd {
  height: 6vh;
  background-color: #ffffff;
}
.page_bd {
  height: 84.333vh;
}

.zh_tab {
  display: flex;
  height: 100%;
}
.zh_tab__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #626262;
}
.zh_tab__item-on {
  color: #000000;
}

最终效果