Comment naviguer dans une page à vue longue

Vue est un framework front-end qui permet aux développeurs de créer plus facilement des applications Web réactives. Dans le développement réel, nous rencontrons souvent des pages relativement longues qui contiennent beaucoup de contenu, comme des tableaux, des listes, des graphiques, etc. Sans une méthode de navigation adaptée, les utilisateurs peuvent se sentir confus et gênés lors de l'utilisation. Cet article présentera quelques méthodes de navigation Vue courantes pour améliorer l'expérience utilisateur.

1. Navigation par ancre

La navigation par ancre, également connue sous le nom d'effet de défilement d'ancre, utilise des ancres de lien pour passer d'une page interne à l'autre. Lorsque l'utilisateur clique sur un lien sur la page, la page défilera automatiquement jusqu'à la position correspondante, obtenant ainsi l'effet de navigation.

Il existe deux façons d'implémenter la navigation par ancre dans Vue. L'une consiste à utiliser Vue Router et à l'implémenter en configurant le routage ; l'autre consiste à utiliser les instructions Vue et à appeler directement les instructions dans le modèle ; Ici, nous prenons l'instruction Vue comme exemple à présenter.

(1) Définissez le point d'ancrage

Ajoutez le point d'ancrage à l'endroit où vous devez sauter sur la page, comme indiqué ci-dessous :

<div id="article1"></div>

(2) Définissez le lien de navigation

Ajoutez le lien à l'emplacement où la navigation doit être implémentée, comme indiqué ci-dessous :

<router-link to="#article1">文章1</router-link>

(3) Définissez l'instruction de défilement

Définissez l'instruction personnalisée v-scroll-to dans l'instance Vue et utilisez la fonction scrollTop pour obtenir l'effet de défilement de la page, comme indiqué ci-dessous :

Vue.directive('scroll-to', {
  bind: function (el, binding) {
    el.addEventListener('click', function () {
      document.documentElement.scrollTop = document.getElementById(binding.value).offsetTop
    })
  }
})

(4) Appelez l'instruction

dans Utilisez la directive v-scroll-to dans le modèle pour invoquer l'effet de navigation, comme indiqué ci-dessous :

<a href="#" v-scroll-to="&#39;article1&#39;">文章1</a>

2. Navigation dans la barre latérale

La navigation dans la barre latérale est une méthode courante de navigation sur un site Web, qui place la barre de navigation sur la barre latérale de la page et affiche les éléments de navigation sous la forme d'une liste.

Il existe deux façons d'implémenter la navigation dans la barre latérale dans Vue. L'une consiste à écrire manuellement le composant de barre de navigation ; l'autre consiste à utiliser le composant de barre de navigation fourni par le framework Vue UI (tel que Element UI, Bootstrap Vue, etc.) . Ici, nous prenons Element UI comme exemple à présenter.

(1) Installer Element UI

Avant d'utiliser Element UI dans un projet Vue, vous devez d'abord installer Element UI. Vous pouvez l'installer via la commande suivante :

npm install element-ui -S

(2) Introduire les composants Element UI

Introduire l'élément. dans le composant -ui de l'instance Vue, comme indiqué ci-dessous :

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

(3) Ajoutez un composant de barre latérale

Utilisez le composant el-aside comme conteneur de barre latérale et le composant el-menu comme élément de navigation dans la barre latérale, comme indiqué ci-dessous :

<el-aside>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :router="true"
    :collapse="collapse"
    background-color="#EDF0F5"
    text-color="#000"
    active-text-color="#409EFF">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">导航一</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="/index1-1">选项1</el-menu-item>
        <el-menu-item index="/index1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组二">
        <el-menu-item index="3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="4">
        <template slot="title">选项4</template>
        <el-menu-item index="/index1-3">选项4-1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </template>
      <el-menu-item index="/index2-1">选项1</el-menu-item>
      <el-menu-item index="/index2-2">选项2</el-menu-item>
      <el-menu-item index="/index2-3">选项3</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </template>
      <el-menu-item index="/index3-1">选项1</el-menu-item>
      <el-menu-item index="/index3-2">选项2</el-menu-item>
      <el-menu-item index="/index3-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</el-aside>

(4 ) Configurer le routage

En plus d'ajouter des composants, vous devez également configurer le routage, comme indiqué ci-dessous :

const routes = [
  { path: '/index1-1', component: Index1 },
  { path: '/index1-2', component: Index1 },
  { path: '/index1-3', component: Index1 },
  { path: '/index2-1', component: Index2 },
  { path: '/index2-2', component: Index2 },
  { path: '/index2-3', component: Index2 },
  { path: '/index3-1', component: Index3 },
  { path: '/index3-2', component: Index3 },
  { path: '/index3-3', component: Index3 },
]
const router = new VueRouter({
  routes
})

3. Navigation de retour en haut

La navigation de retour en haut est une méthode de navigation relativement simple, ajoutez-la en bas de la page Un bouton de retour en haut à position fixe qui permet aux utilisateurs de cliquer sur le bouton à tout moment pour revenir en haut de la page pendant qu'ils défilent.

Il existe deux façons d'implémenter la navigation de retour en haut dans Vue, l'une consiste à écrire manuellement l'implémentation du composant et l'autre consiste à utiliser un plug-in Vue pour l'implémenter. Nous expliquons ici comment utiliser le plug-in Vue.

(1) Installez le plug-in Vue

Avant d'utiliser le plug-in haut de page dans le projet Vue, vous devez d'abord installer le plug-in. Vous pouvez l'installer via la commande suivante :

npm install vue-backtotop --save

(. 2) Présentez le plug-in Vue

Introduisez-le dans le plug-in Vue main.js, comme indiqué ci-dessous :

import VueBackToTop from 'vue-backtotop'

Vue.use(VueBackToTop)

(3) Ajoutez un composant de retour en haut

Utilisez un composant de retour en haut dans la page où vous devez ajouter une fonction de retour en haut, comme indiqué ci-dessous :

<back-to-top></back-to-top>

Grâce aux trois manières ci-dessus, nous pouvons implémenter différentes méthodes de navigation dans les pages dans le projet Vue pour offrir aux utilisateurs une meilleure expérience. Dans le développement réel, la méthode de navigation spécifique à utiliser doit être jugée en fonction de la situation spécifique pour obtenir le meilleur effet d'interaction utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!