【BootstrapVue】滑动监听Scrollspy实现餐厅餐品展示
创始人
2025-06-01 20:05:39
0次

一、介绍

效果图：

介绍：根据滚动位置自动更新引导导航或列表组组件，以指示视口中当前处于活动状态的链接。

作用：可以用于餐厅点菜的菜品展示页侧边栏、博客系统的侧边栏等，实现流畅的垂直滚动监听

官方网址：Scrollspy | Directives | BootstrapVue (bootstrap-vue.org)

在本文中，主要在官方文档的基础上，提供两种呈现数据的方式，

  1. 将数据放在data中，在div中进行加载

  1. 获取后端的传过来的数据，存入data，再进行加载

二、环境准备

需要提前安装好node.js，我使用的是vue2， bootstrap-vue"版本：2.23.1，

  1. 使用npm或yarn 安装 bootstrap-vue

// 两种方式选一个
npm install vue bootstrap bootstrap-vue 
yarn add vue bootstrap bootstrap-vue

  1. 在应用入口注册BootstrapVue，（通常是app.js 或 main.js）

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

  1. 其他需要的东西，例如前后端交互需要的axios等等

三、