话不多说，直接上代码

<!--pages/home/home.wxml-->

<scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '>

<!-- tab -->

<view class="tab">

<view class="tab-nav" style='font-size:12px'>

<view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;background: #fff;border-bottom:{{index>4?'1rpx solid #ddd;':''}}">{{item.text}}</view>

<view>

<view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>

</view>

</view>

</view>

</scroll-view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:150rpx" bindchange="bindChange">

<swiper-item>

<view>分类1</view>

</swiper-item>

<swiper-item>

<view>分类2</view>

</swiper-item>

<swiper-item>

<view>分类3</view>

</swiper-item>

<swiper-item>

<view>分类4</view>

</swiper-item>

<swiper-item>

<view>分类5</view>

</swiper-item>

<swiper-item>

<view>分类6</view>

</swiper-item>

</swiper>

 <!--pages/home/home.wxss-->

.tab {

display: flex;

flex-direction: column;

}

 

.tab-nav {

border-bottom: 1rpx solid #ddd;

width: 100%;

height: 80rpx;

display: flex;

line-height: 79rpx;

position: relative;

}

 

.tab-line {

position: absolute;

left: 0;

bottom: -1rpx;

height: 4rpx;

background: #f7982a;

transition: all 0.3s;

}

 

.tab-content {

flex: 1;

overflow-y: auto;

overflow-x: hidden;

}

 

/*选项卡页面联动切换*/

 

.swiper-tab {

width: 100%;

border-bottom: 2rpx solid #777;

text-align: center;

line-height: 80rpx;

}

 

.swiper-tab-list {

font-size: 30rpx;

display: inline-block;

width: 33.33%;

color: #777;

}

 

.on {

color: #da7c0c;

border-bottom: 1rpx solid #da7c0c;

}

 

.swiper-box {

display: block;

height: 100%;

width: 100%;

overflow: hidden;

}

 

.swiper-box view {

text-align: center;

}

<!--pages/home/home.js-->

Page({

data: {

showtab: 0, //顶部选项卡索引

tabnav: {

tabnum: 5,

tabitem: [

{

"id": 0,

"text": "分类1"

},

{

"id": 1,

"text": "分类2"

},

{

"id": 2,

"text": "分类3"

},

{

"id": 3,

"text": "分类4"

},

{

"id": 4,

"text": "分类5"

},

{

"id": 5,

"text": "分类6"

}

]

},

productList: [],

// tab切换

currentTab: 0,

},

onLoad: function () {

},

setTab: function (e) {

var that = this

that.setData({

showtab: e.currentTarget.dataset.tabindex

})

if (this.data.currentTab === e.currentTarget.dataset.tabindex) {

return false;

} else {

that.setData({

currentTab: e.currentTarget.dataset.tabindex

})

}

},

/**

* 滑动切换tab

*/

bindChange: function (e) {

var that = this;

that.setData({ currentTab: e.detail.current,

showtab: e.detail.current});

 

}

})

 

 该代码实现基于两个大神的代码，(链接:https://blog.csdn.net/u013521220/article/details/78923136和https://blog.csdn.net/qq442270636/article/details/79084685)，在两位大神的基础上衍生出的可滚动的顶部选项卡，在此致谢。代码缺陷：当向右滑动到第6个页面的时候选项卡没有自动滑动。