【wx】

.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.detail
    console.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.userInfo
          this.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/5
    var 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;
}