vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
135 浏览量
2020-12-30
01:44:30
上传
评论
收藏 99KB PDF 举报
vue+导航锚点联动导航锚点联动-滚动监听和点击平滑滚动跳转实例滚动监听和点击平滑滚动跳转实例
最终效果如下：（注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内）-chrome
完成这个功能需要注意：完成这个功能需要注意：
1、点击导航平滑滚动到导航内容处
2、div内滚动时当前导航需要做响应
代码如下：
1、、html结构（因为从项目里截取代码数据内容就不贴出来了，不算难点，这个可以根据自己的项目进行调整，相应的方法和结构（因为从项目里截取代码数据内容就不贴出来了，不算难点，这个可以根据自己的项目进行调整，相应的方法和
类名别弄错就行）类名别弄错就行）
<div class="all-title">
全部应用
<p class="fr">
<span v-for="(item, index) in allMenuList" :key="item.id" :class="[index===activeMenu?'active':'']" @click="jump(index)">{{ item.name }}</span>
</p>
</div>
<div id="scrollBox" class="applications-content">
<div v-for="(val, index) in allMenuList" :key="val.id" class="all-list do-jump">
<p class="applications-title">{{ val.name }}</p>
<ul class="applications-list">
<li v-for="item in val.children" :key="item.id" class="applications-item" @click="changeRouterForRight(item.pathName,item.menuCode)">
<img src="">
<span>{{ item.name }}</span>
<template v-if="showEdit">
<i v-if="addOrRemove(item.menuCode)==0" class="el-icon-circle-plus add-btn" @click="addMenu(item.menuCode)" />
<i v-if="addOrRemove(item.menuCode)==1" class="el-icon-remove remove-btn" @click="removeMenu(item.menuCode)" />
</template>
</li>
</ul>
</div>
</div>
需要说明的数据：activeMenu-当前导航序号，scrollBox-需要在里面滚动的元素即设为overflow-y:scroll的父元素div
2、点击导航平滑滚动的方法：、点击导航平滑滚动的方法：jump(index)
// 跳转
jump(index) {
this.activeMenu = index // 当前导航
const jump = jQuery('.do-jump').eq(index)
资源评论
