4.小程序scroll-view与swiper组合实现tab切换

最近接手一个需要tab切换的小程序，废话不多说，直接上代码

1、wxml

<view class="container">
    <!-- tab导航栏 -->
    <!-- scroll-left属性可以控制滚动条位置 -->
    <!-- scroll-with-animation滚动添加动画过渡 -->
    <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
        <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
            <view class="nav-item {{currentTab == idx ?'active':''}}" style='width:{{tab_width}}%' data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}                </view>
        </block>        
    </scroll-view>
    <!-- 页面内容 -->

    <swiper class="tab-box" current="{{currentTab}}" duration="100" bindchange="switchTab">        
        <swiper-item wx:for="{{contentDada}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
            {{tabItem.text}}
        </swiper-item>
    </swiper>
</view>

2、wxss

/**index.wxss**/
page{
    width: 100%;
    height: 100%;
}
.container{
    width: 100%;
    height: 100%;
}
.nav {
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 80rpx;
    background: #f7f7f7;
    font-size: 16px;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
.nav-item {
    /* width: 33.3%; */
    display: inline-block;
    text-align: center;
}
.nav-item.active{
    color: red;
}
.tab-box{
    background: yellow;
    height: 100%;
    box-sizing: border-box;
    width: 100%;
}
.tab-content{
    overflow-y: scroll;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

3、js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    navData: [
      {
        text: '1'
      },
      {
        text: '2'
      },
      {
        text: '3'
      },
      {
        text: '4'
      },
      {
        text: '5'
      },
      {
        text: '6'
      },
      {
        text: '7'
      },
      {
        text: '8'
      },
      {
        text: '9'
      }
    ],
    contentDada:[
      {
        text: '内容1'
      },
      {
        text: '内容2'
      },
      {
        text: '内容3'
      },
      {
        text: '内容4'
      },
      {
        text: '内容5'
      },
      {
        text: '内容6'
      },
      {
        text: '内容7'
      },
      {
        text: '内容8'
      },
      {
        text: '内容9'
      }
      ],
    currentTab: 0,
    navScrollLeft: 0,
    tab_width:0
  },
  //事件处理函数
  onLoad: function () {
    if(this.data.navData.length == 1){
      this.setData({
        tab_width : 100
      })
    } else if (this.data.navData.length == 2){
      this.setData({
        tab_width: 50
      })
    }else{
      this.setData({
        tab_width: 33.3
      })
    }
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
    wx.request({
      url: '',
      data:{

      },
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        console.log(res.data)
      }
    })
  },
  // 顶部导航实现
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    console.log(cur)
    //每个tab选项宽度占，最多显示3个tab
    var navDataLength = this.data.navData.length;
    if (this.data.navData.length >= 3){
      navDataLength = 3
    }
    var singleNavWidth = this.data.windowWidth / navDataLength;
    //tab选项居中                            
    this.setData({
      navScrollLeft: (cur - 2) * singleNavWidth
    })
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  // 内容区域实现
  switchTab(event) {
    var cur = event.detail.current;
    var navDataLength = this.data.navData.length;
    if (this.data.navData.length >= 3) {
      navDataLength = 3
    }
    console.log(cur)
    var singleNavWidth = this.data.windowWidth / navDataLength;
    this.setData({
      currentTab: cur,
      navScrollLeft: (cur - 1) * singleNavWidth
    });   
  }
})

4、效果图