微信小程序tab选项卡（动态获取）

WXML

  
    
      
        {{item}}
      
    
  
  
    
      
        {{item}}
      
    
  

WXSS

.top-nav-container{
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 14px;
  background-color: #CCC;
  vertical-align: middle;
  white-space: nowrap;
}

.top-nav-container .tab-item{
  display: inline-block;
  margin: 0rpx 30rpx;
}

.top-nav-container .tab-item.active{
  color: rgb(48, 121, 255);
  border-bottom: 4rpx solid #F00;
  line-height: 52rpx;
}

.swiper-container{
  height: calc(100vh - 60rpx);
  font-size: 14px;
}

JS

Page({
  data: {
    /**
     * 导航数据
     */
    topNavs: ['直播', '推荐', '世界杯', '生活', '萌宠', '娱乐', '游戏', '常用', '11111', '22222', '3333', '4444', '5555', '6666'],
    /**
     * 当前激活的当航索引
     */
    currentActiveNavIndex: 0,
    /**
     * 上一个激活的当航索引
     */
    prevActiveNavIndex: -1,
    /**
     * scroll-view 横向滚动条位置
     */
    scrollLeft: 0
  },
  /**
   * 顶部导航改变事件，即被点击了
   * 1、如果2次点击同一个当航，则不做处理
   * 2、需要记录本次点击和上次点击的位置
   */
  topNavChange: function (e) {
    var nextActiveIndex = e.currentTarget.dataset.currentIndex,
      currentIndex = this.data.currentActiveNavIndex;
    if (currentIndex != nextActiveIndex) {
      this.setData({
        currentActiveNavIndex: nextActiveIndex,
        prevActiveNavIndex: currentIndex
      });
    }
  },
  /**
   * swiper滑动时触发
   * 1、prevIndex != currentIndex 表示的是用手滑动 swiper组件
   * 2、prevIndex = currentIndex  表示的是通过点击顶部的导航触发的
   */
  swiperChange: function (e) {
    var prevIndex = this.data.currentActiveNavIndex,
      currentIndex = e.detail.current;
    this.setData({
      currentActiveNavIndex: currentIndex
    });
    if (prevIndex != currentIndex) {
      this.setData({
        prevActiveNavIndex: prevIndex
      });
    }
    this.scrollTopNav();
  },
  /**
   * 滚动顶部的导航栏
   * 1、这个地方是大致估算的
   */
  scrollTopNav: function () {
    /**
     * 当激活的导航小于4个时，不滚动
     */
    if (this.data.currentActiveNavIndex <= 3 && this.data.scrollLeft >= 0) {
      this.setData({
        scrollLeft: 0
      });
    } else {
      /**
       * 当超过4个时，需要判断是向左还是向右滚动，然后做相应的处理
       */
      var plus = this.data.currentActiveNavIndex > this.data.prevActiveNavIndex ? 60 : -60;
      this.setData({
        scrollLeft: this.data.scrollLeft + plus
      });
    }
    console.info(this.data.currentActiveNavIndex, this.data.prevActiveNavIndex, this.data.scrollLeft);
  }
})