Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示

更新時間：2023年03月31日 09:53:11 作者：愛學(xué)習(xí)的小船

本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、介紹

效果圖：

介紹：根據(jù)滾動位置自動更新引導(dǎo)導(dǎo)航或列表組組件，以指示視口中當(dāng)前處于活動狀態(tài)的鏈接。

作用：可以用于餐廳點菜的菜品展示頁側(cè)邊欄、博客系統(tǒng)的側(cè)邊欄等，實現(xiàn)流暢的垂直滾動監(jiān)聽

官方網(wǎng)址：Scrollspy | Directives | BootstrapVue (bootstrap-vue.org)

在本文中，主要在官方文檔的基礎(chǔ)上，提供兩種呈現(xiàn)數(shù)據(jù)的方式，

將數(shù)據(jù)放在data中，在div中進行加載

獲取后端的傳過來的數(shù)據(jù)，存入data，再進行加載

二、環(huán)境準備

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

使用npm或yarn 安裝 bootstrap-vue

// 兩種方式選一個
npm install vue bootstrap bootstrap-vue 
yarn add vue bootstrap bootstrap-vue

在應(yīng)用入口注冊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等等

三、<template>部分

這里以列表組為例，并且用 v-for 循環(huán) 生成每一個item，每個item都是一個card，card中存放餐品信息?？傮w代碼如下：

<template>
  <div>
    <b-container fluid id="menu">
      <b-row>
        <b-col cols="3"> <!--這里代表 左邊 導(dǎo)航欄占幾個格，總共12格-->
          <div id="list-nav" style="width: 100%; height: 800px">
 
            <!--b-list-group 中存左側(cè)導(dǎo)航欄的菜品類別  -->
            <!-- v-b-scrollspy:listgroup-ex 綁定需要被監(jiān)聽的容器，即id為 listgroup-ex的容器，在第26行-->
            <b-list-group v-b-scrollspy:listgroup-ex>
              <!-- b-list-group-item 即為左側(cè)導(dǎo)航中的每個菜品類別，
                    用for循環(huán)，加載 菜品類別數(shù)組categories 中的每個 菜品類別category，
                    通過href實現(xiàn)指引，需要注意，動態(tài)的綁定，href前要加: 冒號
                       "`#p${category.categoryID}`" 意思是 指向 id 為 p+categoryID 的元素，例如 #p1、#p2，在第30行，語法是ES6的模板字符串
                       多加個p 主要是因為 html4 規(guī)定id不能為數(shù)字 -->
              <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"><!--這里表示 右邊的 數(shù)據(jù)欄占幾個格，總共12格-->
          <!-- 下邊的div里 id="listgroup-ex" 即是第10行被監(jiān)聽的容器，里邊就是要被左側(cè)導(dǎo)航 監(jiān)聽指向的 菜品數(shù)據(jù)-->
          <div class="menu-content" id="listgroup-ex" style="position:relative; overflow-y:auto; height:800px">
            <!-- 同樣 用v-for 遍歷菜品類別數(shù)組 categories 取出 每種菜品類別category  -->
            <div v-for="(category, index) in categories" :key="index" class="menu-section">
              <!-- h6這里 是我在右側(cè)增加了菜品類別的小標題，這里的id 就是第16-17行種 href所指向的，也就是數(shù)據(jù)雙向監(jiān)聽的關(guān)鍵，每次頁面呈現(xiàn)到對應(yīng)的id時候，左側(cè)的類別也會改變，同樣點擊左側(cè)，右側(cè)也會跳轉(zhuǎn)到對應(yīng)的地方  -->
              <h6 :id="'p'+category.categoryID" style="margin-top: 5px">{{ category.categoryName }}</h6>
              <b-row>
                <!-- 下邊div 里的 就是用 for循環(huán)取出 該菜品類別 category 里的dishList 數(shù)組 里的每一個 菜品dish，然后呈現(xiàn)出來，具體的樣式就可以自行更改啦-->
                <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>
                          <!--加入購物車按鈕，我用了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>

靜態(tài)頁面中的代碼主要分為兩部分，左側(cè)導(dǎo)航欄 & 右側(cè)數(shù)據(jù)欄，核心就在于兩點：

第10行的代碼中 v-b-scrollspy: listgroup-ex ，指向需要監(jiān)聽的div，即26行id="listgroup-ex" 的div

在16-17行的代碼中，:href="`#p${category.categoryID}`"，用來綁定對應(yīng)的超鏈接，綁定到第30行，因為我用for循環(huán)加載每個菜品，所以href 就得是動態(tài)的，一定記得href前加冒號':'，這里的語法是ES6的模板字符串``，有需要可以看一下，模板字符串 - JavaScript | MDN (mozilla.org)

如下圖所示：

四、<script>部分

4.1 從data中加載數(shù)據(jù)

在script中存測試用例

export default {
  data() {
    return {
      activeSection: null, // 不知道干嘛的在目錄那邊有用到
      currentCategory: '', // 當(dāng)前分類
      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
            },
          ]
        },
      ]
    }
  }
}

4.2 從后端接收數(shù)據(jù)

如果數(shù)據(jù)是從后端過來的，需要在頁面加載時就展現(xiàn)，方法需要在mounted里加載，我習(xí)慣在method里寫，然后在mounted里使用，如下：

export default {
  methods: {
    //獲取菜品信息
    getDishes() {
      // 通過后端API獲取菜品列表（包括分類信息）,需要先引入axios
      this.$api({
        url: '/categories/alldishes', //請求地址
        method: 'get'
      }).then(res => {
        console.log(res)
        this.categories = res.data; //將數(shù)據(jù)傳給categories 
      }).catch(function (error) {
        console.log(error);
      });
    }
  },
  mounted() {
    this.getDishes();
  }
}

五、<style>部分

我對樣式進行了一點點修改，如下：

#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;
}

到此這篇關(guān)于Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示的文章就介紹到這了,更多相關(guān)Bootstrap+Vue滑動監(jiān)聽Scrollspy 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: