vue项目中点击顶部导航定位到页面指定位置

一、为导航添加点击事件

在导航的位置加一个@click="handleTabClick",此处的handleTabClick你可以自定义名字，只要和script中的方法调用名字一致就可以。

<v-tabs v-model="tab" color="black" grow height="50px" class="custom-tabs" background-color="#f1f0f0">
        <v-tab class="oneTab" v-for="item in items" :key="item" :value="item" @click="handleTabClick(item)">{{ item
          }}</v-tab>
      </v-tabs>

二、添加ref属性

在你想定位到达的部分添加一个ref属性，你可以自定义它的名字，这里给出的示例是，点击导航中的资源展示和资源查询，定位到教育资源展示和教育资源查询的部分：

<div class="demo-wrapper bg_color--1" ref="resourceDisplay">
      <v-container fluid>
        <v-row>
          <v-col md="12" class="text-center">
            <div class="title-wrapper">
              <h1 class="text-center">教育资源展示</h1>
               .......
</div>

<div class="demo-wrapper inner-pages bg_color--2" ref="resourceQuery">
      <v-container fluid>
        <v-row>
          <v-col md="12" class="text-center">
            <div class="title-wrapper">
              <h1 class="text-center">教育资源查询</h1>
               .......
</div>

三、script中的操作

handleTabClick(tab) {
      // 根据点击的选项卡值来滚动到相应的卡片位置
      switch (tab) {
        case '资源展示':
          this.scrollToCard('resourceDisplay');
          break;
        case '资源查询':
          this.scrollToCard('resourceQuery');
          break;
           //你可以在这里添加新的想定位到达的部分
      }
    },
    scrollToCard(refName) {
      // 使用 Vue 的 $refs 来获取卡片元素，并滚动到其位置
      const cardElement = this.$refs[refName];
      if (cardElement) {
        // 使用原生的 scrollIntoView 方法来滚动到元素位置
        cardElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }