1. Introduction
Renderings:
Description: Automatically updates a bootstrap navigation or list group component based on scroll position to indicate which link is currently active in the viewport.
Function: It can be used for the sidebar of the dish display page of the restaurant ordering, the sidebar of the blog system, etc., to achieve smooth vertical scrolling monitoring
Official website: Scrollspy | Directives | BootstrapVue (bootstrap-vue.org)
In this article, mainly on the basis of official documents, two ways of presenting data are provided,
-
Put the data in data and load it in div
-
Get the data passed from the backend, store it in the data, and then load it
2. Environment preparation
Need to install node.js in advance, I am using vue2, bootstrap-vue”version: 2.23.1,
-
Install bootstrap-vue using npm or yarn
// choose one of two ways npm install vue bootstrap bootstrap-vue yarn add vue bootstrap bootstrap-vue
-
Register BootstrapVue at the application entry, (usually app.js or 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)
-
Other things needed, such as axios required for front-end and back-end interaction, etc.
3. section
Here we take the list group as an example, and use the v-for loop to generate each item, each item is a card, and the meal information is stored in the card. The overall code is as follows:
<template>
<div>
<b-container fluid id="menu">
<b-row>
<b-col cols="3"> <!--here represents how many grids the left navigation bar occupies, a total of 12 grids-->
<div id="list-nav" style="width: 100%; height: 800px">
<!--b-list-group saves the dish category of the left navigation bar -->
<!-- v-b-scrollspy:listgroup-ex binds the container that needs to be monitored, that is, the container whose id is listgroup-ex, on line 26 -->
<b-list-group v-b-scrollspy:listgroup-ex>
<!-- b-list-group-item is each dish category in the left navigation,
Use a for loop to load each dish category category in the dish category array categories,
To achieve guidance through href, it should be noted that for dynamic binding, add: colon before href
"`#p${category.categoryID}`" means to point to the element whose id is p + categoryID, such as #p1, #p2, on line 30, the syntax is the template string of ES6
Add more p mainly because html4 stipulates that id cannot be a number -->
<b-list-group-item class="list-nav-item" v-for="(category, index) in categories" :key="index"
:href="`#p${category.categoryID}`">
{<!-- -->{ category. categoryName }}
</b-list-group-item>
</b-list-group>
</div>
</b-col>
<b-col cols="9"><!--Here indicates how many grids the data column on the right occupies, a total of 12 grids-->
<!-- The id="listgroup-ex" in the div below is the monitored container on line 10, which is the dish data to be pointed to by the left navigation monitoring -->
<div class="menu-content" id="listgroup-ex" style="position:relative; overflow-y:auto; height:800px">
<!-- Also use v-for to traverse the categories array categories to get out each category category -->
<div v-for="(category, index) in categories" :key="index" class="menu-section">
<!-- h6 Here is the subtitle of the dish category I added on the right. The id here is what the href points to in lines 16-17, which is the key to data two-way monitoring. Every time the page is presented to the corresponding id time, the category on the left will also change, also click on the left, and the right will jump to the corresponding place -->
<h6 :id="'p' + category.categoryID" style="margin-top: 5px">{<!-- -->{ category.categoryName }}</h6>
<b-row>
<!-- In the div below is to use the for loop to take out each dish in the dishList array in the category of the dish, and then present it, and the specific style can be changed by yourself -->
<div class="card" v-for="(dish,index2) in category.dishList" :key="index2">
<b-row>
<b-col cols="5">
<img class="card-img-top" :src="dish.dishPhoto">
</b-col>
<b-col cols="7" class="card-message">
<div class="card-body">
<p class="card-title" style="font-size: 15px">{<!-- -->{ dish.dish }}</p>
<p class="card-text" style="font-size: 12px" >{<!-- -->{ dish.description }}</p>
<div class="card-text"><strong style="color:orange; font-size: 15px">￥{<!-- -->{ dish.price }}</strong>
<!--Add to the shopping cart button, I used the components in vant, if you use it, remember to download and import vant, or change it to other button components-->
<van-button icon="plus" type="warning" color="#ee0a24" round @click="addToCart(dish)"
size="mini" id="addtocartmenu"></van-button>
</div>
</div>
</b-col>
</b-row>
</div>
</b-row>
</div>
</div>
</b-col>
</b-row>
</b-container>
</div>
</template>
The code in the static page is mainly divided into two parts, the left navigation bar & amp; right data bar, the core lies in two points:
-
In the code on line 10, v-b-scrollspy: listgroup-ex points to the div that needs to be monitored, that is, the div with id=”listgroup-ex” on line 26
-
In the code on lines 16-17, :href=”`#p${category.categoryID}`” is used to bind the corresponding hyperlink to line 30, because I use a for loop to load each It’s a dish, so the href must be dynamic. Be sure to add a colon ‘:’ before the href. The syntax here is the ES6 template string “. You can take a look at it if you need it. Template string – JavaScript | MDN (mozilla .org)
As shown below:
