微信小程序滑动切换导航，导航栏跟随顶部tab导航滚动

前言

很多App都有这种设计，例如淘宝、爱奇艺、今日头条、知乎等都有用到，大部分的App都会用到这种设计，非常主流。

tab导航栏使用<scroll-view>标签，内容使用<swiper>，不多说，直接上代码，为了更真实展示实例的使用，我直接就配置了服务器来取数据进行渲染。

index.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':''}}"  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="{
  {yxlist}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
            <view>{
  {tabItem.yxname}}</view>
            <image src="{
  {tabItem.yxlogo}}" style="width:100px;height:100px;"></image>
        </swiper-item>
    </swiper>
</view>

index.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: 20%;
  display: inline-block;
  text-align: center;
}
.nav-item.active{
  color: red;
  font-weight: bold;
}
.tab-box{
  background: #fff;
  padding-top: 80rpx;
  height: 100%;
  box-sizing: border-box;
}
.tab-content{
  overflow-y: scroll;
}

index.js

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

Page({
    data: {
        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
    },
    //事件处理函数
    onLoad: function () {
      var that = this;
      //向后端服务器发起请求数据
      wx.request({
        //URL
        url: 'https://www.likeyun.cn/api/yxlist.json',
        //发送