1、顶部导航栏（滚动）

使用的是swiper和swiper-item来实现，左右滑动切换顶部选项，效果图如下：

代码：

js

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

Page({ 
  data: { 
    tabbar: ["热门", "娱乐", "体育", "国内", "财经", "科技", "教育", "汽车"],
    winHeight: "", //窗口高度
    currentTab: 0, //预设当前项的值
    scrollLeft: 0 //tab标题的滚动条位置
  },

  onLoad: function () { 
    let that = this;
    // 高度自适应
    wx.getSystemInfo({ 
      success: function (res) { 
        let calc = res.windowHeight; //顶部脱离文档流了(- res.windowWidth / 750 * 100);
        // console.log('==顶部高度==',calc)
        that.setData({ 
          winHeight: calc
        });
      }
    });
  },
  // 滚动切换标签样式
  switchTab: function (e) { 
    let that = this;
    // console.log("滚动切换标签",e)
    that.setData({ 
      currentTab: e.detail.current
    });
    that.checkCor();
  },
  // 点击标题切换当前页时改变样式
  swichNav: function (e) { 
    let cur = e.currentTarget.dataset.current;
    if (this.data.currentTab == cur) { 
      return false;
    } else { 
      this.setData({ 
        currentTab: cur
      })
    }
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function () { 
    let that = this;
    if (that.data.currentTab > 3) { 
      that.setData({ 
        scrollLeft: 300
      })
    } else { 
      that.setData({ 
        scrollLeft: 0
      })
    }
  },
})

.wxml

<!--index.wxml-->
<view class="container">
  <!-- 顶部导航栏 -->
  <scroll-view scroll-x scroll-with-animation class="tab-view" scroll-left="{ {scrollLeft}}">
    <view wx:for="{ {tabbar}}" wx:key="{ {index}}" class="tab-bar-item { {currentTab==index ? 'active' : ''}}"
      data-current="{ {index}}" catchtap="swichNav">
      <text class="tab-bar-title">{ { item}}</text>
    </view>
  </scroll-view>

  <!-- 内容 -->
  <swiper class="tab-content" current="{ {currentTab}}" duration="300" bindchange="switchTab"
    style="height:{ {winHeight}}px">
    <swiper-item wx:for="{ {tabbar}}" wx:key="{ {index}}">
      <scroll-view scroll-y class="scoll-y">
        <!--start 内容部分，可直接删除-->
        <block wx:if="{ {index ==0}}">
          <include src="../remen/remen.wxml" />
        </block>

        <block wx:if="{ {index ==1}}">
          <include src="../yule/yule.wxml" />
        </block>
        <!--end 内容部分，可直接删除-->
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

.wxss

.container { 
  
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}


::-webkit-scrollbar { 
  width: 0;
  height: 0;
  color: transparent;
}

.tab-view::before { 
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}

.tab-view { 
  width: 100%;
  height: 100rpx;
  overflow: hidden;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #fff;
  white-space: nowrap;
}

.tab-bar-item { 
  padding: 0;
  height: 100rpx;
  min-width: 80rpx;
  line-height: 100rpx;
  margin: 0 28rpx;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
}

.tab-bar-title { 
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  color: #999;
  font-weight: 400;
}

.active { 
  border-bottom: 6rpx solid #5677fc;
}

.active .tab-bar-title { 
  color: #5677fc !important;
  font-size: 36rpx;
  font-weight: bold;
}



.scoll-y { 
  height: 100%;
}

.tab-content { 
  height: 100%;
  width: 100%;
}

需要完整代码可到这里下载：https://download.csdn.net/download/wy313622821/12914516

2、顶部导航栏（不带滚动）

效果图：

.js

// pages/button/button.js
Page({ 
    data: { 
        barList: ['热点','新闻','趣事'],
        barIndex:0
    },
    clickBar:function(e){ 
        this.setData({ 
            barIndex:e.currentTarget.dataset.index
        })
    },
    onLoad: function (options) {  
        
    },
})

.wxml

<view class='ui_tab'>
    <view class='ui_navbar'>
        <view class='ui_navbar_item { {barIndex==index?"ui_navbar_item_on":""}}' wx:for="{ {barList}}" wx:key="{ {index}}" data-index="{ {index}}" bindtap='clickBar'>{ { item}}</view>
    </view>
    <view wx:if="{ {barIndex==0}}">页面一</view>
    <view wx:if="{ {barIndex==1}}">页面二</view>
    <view wx:if="{ {barIndex==2}}">页面三</view>
</view>

.wxss

.ui_tab { 
  position: relative;
  
}

.ui_navbar { 
  display: flex;
  position: relative;
}

.ui_navbar_item { 
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  
}


.ui_navbar_item_on { 
  
  color: rgb(190, 77, 77);
  
  background: #f1f1f1;
  
  border-bottom: 2rpx solid rgb(201, 107, 107);
  margin: 0rpx 20rpx 0rpx 20rpx;
}

所有实现的代码都给出来了，这里就不放下载链接了

3、导航栏滑到一定程度就隐藏轮播图

代码:

js

var that
Page({ 

  
  data: { 
    autoplay: false, //是否自动播放
    circular: true, //是否采用衔接滑动
    indicatorDots: true, //是否显示面板指示点
    scrollTop: '', //滑动的距离
    navFixed: false, //导航是否固定
    currentData: 0,
    // 轮播图和小车 的图片
    pictures: [
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602154823228&di=b7d6be25877b4a6a221963b8172a32dd&imgtype=0&src=http%3A%2F%2Fpic15.nipic.com%2F20110630%2F1295091_123724627598_2.jpg",
      "https://m0.autoimg.cn/cardfs/upload/spec/11852/800x0_q87_autohomecar__y_20120127095328825264.jpg",
      "https://m0.autoimg.cn/cardfs/upload/spec/11852/800x0_q87_autohomecar__y_20120127095322804264.jpg",
      "https://m0.autoimg.cn/cardfs/upload/spec/10003/800x0_q87_autohomecar__y_20111119102503991264.jpg",

    ],
    // 电车中的图片
    recommendPictures: [
      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=225148521,438150860&fm=26&gp=0.jpg",
      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=36293247,1325499932&fm=26&gp=0.jpg",
      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1778493161,3668510566&fm=26&gp=0.jpg",
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602154997262&di=cb0ca67c41063c6805940c7ba3430fc6&imgtype=0&src=http%3A%2F%2Fimage.cn.made-in-china.com%2F2f0j01HviacVUlvgkr%2F%25E8%25BE%25B9%25E4%25B8%2589%25E8%25BD%25AE%25E6%2591%25A9%25E6%2589%2598%25E8%25BD%25A6%2B%2528CJ750M1M%2529.jpg",
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602154997262&di=6938091ecc99a9f6e1e41367e42925d4&imgtype=0&src=http%3A%2F%2Fimg11.360buyimg.com%2Fn1%2Fjfs%2Ft4243%2F146%2F607861919%2F136644%2Fb46eda48%2F58b6cb71N5f4c6e21.jpg"
    ]
  },

  
  onLoad: function (options) { 
    that = this;

    
    wx.getSystemInfo({ 
      success: (res) => { 
        this.setData({ 
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
  },


  // 获取当前滑块的index
  bindchange: function (e) { 
    console.log('获取当前滑块的index')

    that.setData({ 
      currentData: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  checkCurrent: function (e) { 
    console.log('点击切换')

    console.log(e.target.dataset.current)
    if (that.data.currentData === e.target.dataset.current) { 
      return false;
    } else { 
      that.setData({ 
        currentData: e.target.dataset.current
      })
    }
  },

  //监听滑动
  layoutScroll: function (e) { 
    this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
    // console.log(this.data.scrollTop)
    // console.log(this.data.navFixed)

    
    

    
    var navtopHeight = 160;
    if (this.data.scrollTop <= -navtopHeight) { 
      this.setData({ 
        navFixed: true
      })
    } else { 
      this.setData({ 
        navFixed: false
      })
    }
  },
})

wxml

<view style="height: { {windowHeight}}px;">
  <scroll-view bindscroll='layoutScroll' scroll-y="true" style="height: 100vh;">
    <!-- swiper顶部图片轮播切换 -->
    <swiper indicator-dots="{ {indicatorDots}}" autoplay="{ {autoplay}}" circular="{ {circular}}" vertical="{ {vertical}}"
      interval="{ {interval}}" duration="{ {duration}}" class='swiper-home'>
      <block wx:for="{ {pictures}}" data-index="{ {index}}" class='block-box' wx:key="{ {index}}">
        <swiper-item>
          <image src='{ {item}}' class='repair-img'></image>
        </swiper-item>
      </block>
    </swiper>

    <scroll-view scroll-x="true" class="nav { {navFixed? 'positionFixed':''}}">
      <!-- 导航栏 -->
      <view class='topTabSwiper'>
        <view class='one-tab' data-current="0" bindtap='checkCurrent'>
          <view data-current="0" class='{ {currentData == 0 ? "tab-title-select" : "tab-title"}}'>小车</view>
          <view class='{ {currentData == 0 ? "one-tab-line" : ""}}' data-current="0"></view>
        </view>
        <view class='center-tab' data-current="1" bindtap='checkCurrent'>
          <view data-current="1" class='{ {currentData == 1 ? "tab-title-select" : "tab-title"}}'>摩托</view>
          <view class='{ {currentData == 1 ? "two-tab-line" : ""}}' data-current="1"></view>
        </view>

        <view class='tab' data-current="2" bindtap='checkCurrent'>
          <view data-current="2" class='{ {currentData == 2 ? "tab-title-select" : "tab-title"}}'>其他</view>
          <view class='{ {currentData == 2 ? "one-tab-line" : ""}}' data-current="2"></view>
        </view>
      </view>

    </scroll-view>

    <!-- 切换0小车的内容 -->
    <view class='one-page' wx:if="{ {currentData==0}}">
      <view wx:for="{ {pictures}}" data-index="{ {index}}" wx:key="{ {index}}">
        <image src='{ {item}}' class='repair-img'></image>
      </view>
    </view>

    <!-- 切换1摩托的内容 -->
    <view class='two-page' wx:if="{ {currentData==1}}">
      <view wx:for="{ {recommendPictures}}" data-index="{ {index}}" wx:key="{ {index}}">
        <image src='{ {item}}' class='recommend-img'></image>
      </view>
    </view>

    <!-- 切换2其他的内容 -->
    <view class='three-page' wx:if="{ {currentData==2}}">
      <text>其他的内容</text>
    </view>
  </scroll-view>
</view>

wxss

page { 
  width: 100%;
  height: auto;
  background: #f3f3f3;
}
.swiper-home { 
  height: 30vh;
  width: 100%;
}
.block-box { 
  height: 30vh;
  width: 100%;
}
.repair-img { 
  width: 100vw;
  height: 30vh;
}
.nav { 
  background: white;
  z-index: 99;
  box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; 
  -webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}
.positionFixed { 
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; 
  -webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}


.topTabSwiper:after { 
  content: "";
  clear: both;
  display: block;
}
.one-tab { 
  width: 26vw;
  float: left;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.tab-title-select { 
  color: lightcoral;
  font-size: 32rpx;
}
.tab-title { 
  font-size: 32rpx;
}
.one-tab-line { 
  width: 10vw;
  border-bottom: 6rpx solid lightcoral;
  margin-left: 8vw;
  margin-top: 1vh;
  margin-bottom: 0.2vh;
}
.center-tab { 
  width: 48vw;
  float: left;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.two-tab-line { 
  width: 10vw;
  border-bottom: 6rpx solid lightcoral;
  margin-left: 19vw;
  margin-top: 1vh;
  margin-bottom: 0.2vh;
}
.tab { 
  float: left;
  width: 26vw;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.one-page { 
  background: white;
  margin-top: 1vh;
}
.two-page{ 
    background: white;
  margin-top: 1vh;
}
.recommend-img{ 
  width: 100vw;
  height: 36vh;
}