.js:

//message.js
const app = getApp()
Page({data: {background: '#D1EEEE',activeKey: 0,motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),navData: [{text: '首页'},{text: '健康'},{text: '情感'},{text: '职场'},{text: '育儿'},{text: '纠纷'},{text: '青葱'},{text: '上课'},{text: '下课'}],currentTab: 0,navScrollLeft: 0},goBack () {wx.switchTab({url: '/pages/home/home'})},onChange (event) {this.data.activeKey = event.detailconsole.log(event.detail)},  //事件处理函数onLoad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse) {// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}wx.getSystemInfo({success: (res) => {this.setData({pixelRatio: res.pixelRatio,windowHeight: res.windowHeight,windowWidth: res.windowWidth})},})},switchNav (event) {var cur = event.currentTarget.dataset.current;//每个tab选项宽度占1/5var singleNavWidth = this.data.windowWidth / 5;//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 singleNavWidth = this.data.windowWidth / 5;this.setData({currentTab: cur,navScrollLeft: (cur - 2) * singleNavWidth});}
})

.json:

{"usingComponents": {"van-sidebar": "@vant/weapp/sidebar/index","van-sidebar-item": "@vant/weapp/sidebar-item/index"},"navigationStyle": "custom"
}

.wxml:

<!-- message.wxml -->
<view class="inaver _30f2b4d" style="background:{{background}};color:{{getColor}}"><view class="left _30f2b4d" catchtap="goBack"><image class="icon _30f2b4d" src="/static/icons/tabs/icon_huabanfuben.png" /></view><view class="center _30f2b4d"><!-- 自定义区域 -->分类</view><view class="right _30f2b4d"><!-- 保护右上角胶囊不被污染 --></view>
</view>
<view class="protect-inaver _30f2b4d"><!-- 占据顶部位置， 伪padding板块 -->
</view>
<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':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view></block></scroll-view><!-- 页面内容 --><swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab"><swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">{{tabItem}}</swiper-item></swiper>
</view>

.wxss:

.inaver._30f2b4d {box-sizing: border-box;padding-top: 44rpx;width: 100vw;height: 160rpx;display: flex;position: fixed;z-index: 5000;top: 0;left: 0;
}.inaver .left._30f2b4d {width: 100rpx;height: 100rpx;margin: 8rpx;
}.inaver .left image.icon._30f2b4d {width: 60rpx;height: 60rpx;padding: 10rpx;margin: 10rpx;
}
.inaver .center._30f2b4d {height: 100rpx;line-height: 100rpx;flex: 1;margin: 8rpx;font-size:16px;text-align:center;
}.inaver .right._30f2b4d {width: 240rpx;height: 100rpx;margin: 8rpx;
}.protect-inaver._30f2b4d {box-sizing: border-box;width: 100vw;height: 160rpx;
}/**index.wxss**/
page{width: 100%;height: 100%;
}
.container{width: 100%;height: 100%;padding:0px;
}
.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: 68 px;left: 0;z-index: 99;
}
.nav-item {width: 20%;display: inline-block;text-align: center;
}
.nav-item.active{color: red;
}
.tab-box{background: greenyellow;padding-top: 80rpx;height: 100%;box-sizing: border-box;width: 100%;
}
.tab-content{overflow-y: scroll;
}