利用uniapp实现全屏滑动导航功能

<template><view class="navigation"><scroll-view class="navigation-list" scroll-x><view v-for="(item, index) in navList" :key="index" class="navigation-item" :class="{ 'active': activeIndex === index }"><text class="item-text">{{ item }}</text></view></scroll-view></view></template><script>export default {  data() {    return {      navList: ["首页", "分类", "购物车", "我的"], // 导航栏显示的文字      activeIndex: 0, // 当前选中的导航项索引    };  },};</script><style>.navigation {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 50px;  background-color: #ffffff;  z-index: 999;}.navigation-list {  white-space: nowrap;  overflow-x: auto;  -webkit-overflow-scrolling: touch;}.navigation-item {  display: inline-block;  padding: 0 15px;  height: 50px;  line-height: 50px;  font-size: 16px;}.item-text {  color: #000000;}.active {  color: #ff0000;}</style>

<template><view class="home"><swiper class="swiper-box"><swiper-item v-for="(item, index) in navList" :key="index"><view class="swiper-item"><text>{{ item }}</text></view></swiper-item></swiper></view></template><script>export default {  data() {    return {      navList: ["首页", "分类", "购物车", "我的"], // 导航栏显示的文字      activeIndex: 0, // 当前选中的导航项索引    };  },  methods: {    handleSwiperChange(event) {      this.activeIndex = event.detail.current;    },  },};</script><style>.home {  margin-top: 50px;}.swiper-box {  width: 100%;  height: 100%;}.swiper-item {  height: calc(100vh - 50px);  display: flex;  justify-content: center;  align-items: center;  background-color: #f8f8f8;}.text {  font-size: 36px;}</style>

<template><view class="container"><navigation></navigation><router-view></router-view></view></template><script>import navigation from "@/pages/navigation.vue";export default {  components: {    navigation,  },};</script><style>.container {  width: 100%;  height: 100%;}</style>