uniapp顶部滚动导航栏

UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。在UniApp中，可以使用组件来实现顶部滚动导航栏。

一种常见的实现方式是使用uni-app提供的`uni-segmented-control`组件。该组件可以实现顶部的滚动导航栏，并且可以与`uni-swiper`组件结合使用，实现滑动切换页面的效果。

以下是使用`uni-segmented-control`和`uni-swiper`组件实现顶部滚动导航栏的示例代码：

<template>
  <view>
    <uni-segmented-control :current="currentTab" @change="handleChange">
      <view v-for="(item, index) in tabs" :key="index" :title="item"></view>
    </uni-segmented-control>
    <uni-swiper :current="currentTab" @change="handleSwiperChange">
      <swiper-item v-for="(item, index) in tabs" :key="index">
        <!-- 每个页面的内容 -->
      </swiper-item>
    </uni-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的导航项索引
      tabs: ['Tab1', 'Tab2', 'Tab3'] // 导航项的标题数组
    };
  },
  methods: {
    handleChange(e) {
      this.currentTab = e.detail.index;
    },
    handleSwiperChange(e) {
      this.currentTab = e.detail.current;
    }
  }
};
</script>

在上述代码中，`uni-segmented-control`组件用于显示顶部的导航栏，`uni-swiper`组件用于实现页面的滑动切换。通过监听`change`事件，可以在导航项切换时更新当前选中的导航项索引，从而实现页面的切换。