开发浮动菜单,实现功能:
1、点击菜单项,滚动到对应位置。 2、拖动滚动条,对应的菜单项高亮显示。
效果如下图所示:
考虑到多个页面都有此效果,所以做成公共组件breadnav.vue
<template>
<div class="nav" :class="{'is_fixed': navFixed}">
<div v-for="(item, index) in this.menus" :key="index" @click="toClick(item.url, index)" :class="navActive === index ? 'is_active' : ''">{
{item.title}}</div>
</div>
</template>
<script>
/* add by wzy at 2020/04/29
* menus 浮动菜单项
* navArr 每个菜单项对应的scrolltop值
*/
export default {
name: 'breadnav',
props: {
menus: {
type: Array,
default() {
return []