溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了怎么使用Bootstrap+Vue滑動監聽Scrollspy實現餐廳餐品展示的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么使用Bootstrap+Vue滑動監聽Scrollspy實現餐廳餐品展示文章都會有所收獲，下面我們一起來看看吧。
效果圖：
介紹：根據滾動位置自動更新引導導航或列表組組件，以指示視口中當前處于活動狀態的鏈接。
作用：可以用于餐廳點菜的菜品展示頁側邊欄、博客系統的側邊欄等，實現流暢的垂直滾動監聽
需要提前安裝好node.js，我使用的是vue2， bootstrap-vue"版本：2.23.1，
使用npm或yarn 安裝 bootstrap-vue
// 兩種方式選一個 npm install vue bootstrap bootstrap-vue yarn add vue bootstrap bootstrap-vue
在應用入口注冊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)其他需要的東西，例如前后端交互需要的axios等等
這里以列表組為例，并且用 v-for 循環 生成每一個item，每個item都是一個card，card中存放餐品信息。總體代碼如下：
<template>
<div>
<b-container fluid id="menu">
<b-row>
<b-col cols="3"> <!--這里代表 左邊 導航欄占幾個格，總共12格-->
<div id="list-nav" >
<!--b-list-group 中存左側導航欄的菜品類別 -->
<!-- v-b-scrollspy:listgroup-ex 綁定需要被監聽的容器，即id為 listgroup-ex的容器，在第26行-->
<b-list-group v-b-scrollspy:listgroup-ex>
<!-- b-list-group-item 即為左側導航中的每個菜品類別，
用for循環，加載 菜品類別數組categories 中的每個 菜品類別category，
通過href實現指引，需要注意，動態的綁定，href前要加: 冒號
"`#p${category.categoryID}`" 意思是 指向 id 為 p+categoryID 的元素，例如 #p1、#p2，在第30行，語法是ES6的模板字符串
多加個p 主要是因為 html4 規定id不能為數字 -->
<b-list-group-item class="list-nav-item" v-for="(category, index) in categories" :key="index"
:href="`#p${category.categoryID}`" rel="external nofollow" >
{{ category.categoryName }}
</b-list-group-item>
</b-list-group>
</div>
</b-col>
<b-col cols="9"><!--這里表示 右邊的 數據欄占幾個格，總共12格-->
<!-- 下邊的div里 id="listgroup-ex" 即是第10行被監聽的容器，里邊就是要被左側導航 監聽指向的 菜品數據-->
<div class="menu-content" id="listgroup-ex" >
<!-- 同樣 用v-for 遍歷菜品類別數組 categories 取出 每種菜品類別category -->
<div v-for="(category, index) in categories" :key="index" class="menu-section">
<!-- h7這里 是我在右側增加了菜品類別的小標題，這里的id 就是第16-17行種 href所指向的，也就是數據雙向監聽的關鍵，每次頁面呈現到對應的id時候，左側的類別也會改變，同樣點擊左側，右側也會跳轉到對應的地方 -->
<h7 :id="'p'+category.categoryID" >{{ category.categoryName }}</h7>
<b-row>
<!-- 下邊div 里的 就是用 for循環取出 該菜品類別 category 里的dishList 數組 里的每一個 菜品dish，然后呈現出來，具體的樣式就可以自行更改啦-->
<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" >{{ dish.dish }}</p>
<p class="card-text" >{{ dish.description }}</p>
<div class="card-text"><strong >￥{{ dish.price }}</strong>
<!--加入購物車按鈕，我用了vant里的組件，用的話，記得下載并引入vant,或者改成其他button組件-->
<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>靜態頁面中的代碼主要分為兩部分，左側導航欄 & 右側數據欄，核心就在于 兩點：
第10行的代碼中 v-b-scrollspy: listgroup-ex ，指向需要監聽的div，即26行id="listgroup-ex" 的div
在16-17行的代碼中，:href="`#p${category.categoryID}`"，用來綁定對應的超鏈接，綁定到第30行，因為我用for循環加載每個菜品，所以href 就得是動態的，一定記得href前加冒號':'， 這里的語法是ES6的模板字符串``，有需要可以看一下，模板字符串 - JavaScript | MDN (mozilla.org)
如下圖所示：
在script中存測試用例
export default {
data() {
return {
activeSection: null, // 不知道干嘛的在目錄那邊有用到
currentCategory: '', // 當前分類
categories: [
{
categoryID: 1,
categoryName: "漢堡",
dishList: [
{
dishID: 1,
dish: "漢堡11",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 2,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 3,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 4,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
]
},
{
categoryID: 2,
categoryName: "漢堡",
dishList: [
{
dishID: 1,
dish: "漢堡11",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 2,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 3,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 4,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
]
},
{
categoryID: 3,
categoryName: "漢堡",
dishList: [
{
dishID: 1,
dish: "漢堡11",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 2,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 3,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
{
dishID: 4,
dish: "漢堡",
description: "漢堡",
dishPhoto: "https://img.yzcdn.cn/vant/cat.jpeg",
price: 10,
stock: 100
},
]
},
]
}
}
}如果數據是從后端過來的，需要在頁面加載時就展現，方法需要在mounted里加載，我習慣在method里寫，然后在mounted里使用，如下：
export default {
methods: {
//獲取菜品信息
getDishes() {
// 通過后端API獲取菜品列表（包括分類信息）,需要先引入axios
this.$api({
url: '/categories/alldishes', //請求地址
method: 'get'
}).then(res => {
console.log(res)
this.categories = res.data; //將數據傳給categories
}).catch(function (error) {
console.log(error);
});
}
},
mounted() {
this.getDishes();
}
}我對樣式進行了一點點修改，如下：
#menu {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
box-sizing: border-box;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 0px;
padding-right: 0px;
margin-right: 0px;
margin-left: 0px;
height: calc(100% - 10rem);
width: 100%;
overflow-y: auto;
display: block !important;
}
.list-nav-item {
--bs-list-group-color: #212529;
--bs-list-group-bg: null;
--bs-list-group-border-color: null; /*rgba(0, 0, 0, 0.125) */
--bs-list-group-border-width: 1px;
--bs-list-group-border-radius: 0.375rem;
--bs-list-group-item-padding-x: 1rem;
--bs-list-group-item-padding-y: 0.5rem;
--bs-list-group-action-color: #495057;
--bs-list-group-action-hover-color: #495057;
--bs-list-group-action-hover-bg: #f8f9fa;
--bs-list-group-action-active-color: #212529;
--bs-list-group-action-active-bg: #e9ecef;
--bs-list-group-disabled-color: #6c757d;
--bs-list-group-disabled-bg: #fff;
--bs-list-group-active-color: #fff;
--bs-list-group-active-bg: #ffcd56;
--bs-list-group-active-border-color: #ffcd56;
display: flex;
flex-direction: column;
padding-left: 10px;
margin-bottom: 0;
border-radius: var(--bs-list-group-border-radius);
}
/*商品列表*/
.card {
background: none;
}
.card-message {
padding-left: 0;
padding-right: 0;
}
.card-title {
width: auto;
height: 20px;
margin-top: 2px;
}
.card-body {
padding-left: 0;
padding-right: 0;
}關于“怎么使用Bootstrap+Vue滑動監聽Scrollspy實現餐廳餐品展示”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么使用Bootstrap+Vue滑動監聽Scrollspy實現餐廳餐品展示”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
