这篇文章主要介绍了怎么使用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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。