1.最近出来一个新需求,要求滚动分组时右边出现导航栏,可以通过导航栏跳转到相应分组,实现效果如下:
2.首先监听滚动@scroll="scrollEvent"
,滚动方法实现如下:
// 监听滚动
scrollEvent (e) {
this.showMao = true // 显示导航栏
let scrollItems = document.querySelectorAll('.temp-items')
for (let i = scrollItems.length - 1; i >= 0; i--) {
let judge =
e.target.scrollTop >=
scrollItems[i].offsetTop - scrollItems[0].offsetTop - 80 // 减去80是我页面布局的原因,视情况而定
if (judge && this.toMove) { // 右边导航栏跟随滚动
this.toMove = true
this.activeStep = i
this.scrollLabel(`${i}child`)
break
}
}
},
3.实现导航跟随页面滚动方法
scrollLabel (e) {
let _this = this
let t = 1
let queryId = document.getElementById(e)
queryId.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'})
if (this.timer2) {
clearInterval(this.timer2)
}
// 未滚动后两秒隐藏导航栏
this.timer2 = setInterval(() => {
if (t <= 0 && _this.hideMao) {
clearInterval(_this.timer2)
_this.showMao = false
_this.$forceUpdate()
return
}
t--
}, 1000)
},
4.实现点击导航栏跳转对应分组:
jump (e) {
this.toMove = false
let queryId = document.getElementById(e)
this.activeStep = e
new Promise(
function (resolve, reject) {
resolve('成功')
queryId.scrollIntoView(true)
},
).then(
(res) => {
this.toMove = true
},
)
},
data里面变量初始状态
activeStep: 0,
hideMao: true,
loading: false,
toMove: true,
showMao: false,
timer2: null
5.页面上也通过鼠标移入移出改变导航栏显示隐藏,如下;
<div class="page-container" @scroll="scrollEvent">
<div class="temp-items" :id="index" v-for="(option, index) in tempList" :key="'temp-'+index">
<div class="temp-top">
<div class="top-info">
<h3 class="top-title">{{option.name}}</h3>
<div class="top-text">{{option.desc || '暂无题组介绍'}}</div>
</div>
</div>
<div class="temp-fields" v-loading="loading">
<template-draggable ref="TemplateDraggable"
:templateValues="option.fields"
:templateId="''+index"
:readOnly="crfStatus===1 || proStatus ===0 || !anStatus"
:draggable="false"
:editorAble="false"
v-on:templateBack="templateEdit"
></template-draggable>
</div>
</div>
<transition name="fade">
<div class="maoDian" v-show="showMao" @mouseleave="showMao=false;hideMao=true" @mouseenter="hideMao=false">
<div v-for="(option, index) in tempList" :style="{color: activeStep === index ? '#1987e1' : '#5c5c5c'}"
:key="option.name">
<span :id="index+'child'" @click="jump(index)">{{option.name}}</span>
</div>
</div>
</transition>
</div>
6.不过在跳转的时候我没加平滑过渡,原因是加了平滑过渡后,还没滚动完,Promise就执行完成了,toMove 状态就改变了,导致后面滑动页面,导航栏就不随页面滚动到相应目录,效果如下:
希望路过的大佬救救孩子