如何使用intersectionWatch/Scrollspy显示元素上的特定类?
我的页面中有三个VUE部分。
<section id="home">Home</section>
<section id="about">About</section>
<section id="contact">Contact</section>
当我单击导航栏链接时,它会将我滚动到相应的部分。 这是我的路由器链路。
<router-link to="/">Home</router-link>
<router-link to="/#about">About</router-link>
<router-link to="/#contact">Contact</router-link>
默认情况下,这些类将添加到活动页的链接中。
router-link-active router-link-exact-active
<a href="/" class="router-link-active router-link-exact-active" data-v-41458b80="" aria-current="page">Home</a>
<a href="/#about" class="router-link-active router-link-exact-active" data-v-41458b80="" aria-current="page">About</a>
<a href="/#contact" class="router-link-active router-link-exact-active" data-v-41458b80="" aria-current="page">Contact</a>
但是,因为所有部分都在同一个索引页上,所以这些类会添加到所有导航栏链接中。
当页面位于特定部分时,是否可以添加自定义类?
解决方案
如果您想创建像in this example这样的交集观察器,可以使用以下代码
<template>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">
Intersection observer example
</a>
<p
v-observe-visibility="{
callback: resetHashUrl,
intersection: {
threshold: 0.5,
},
}"
style="background-color: hsl(0, 0%, 80%); height: 100vh"
>
top block (triggered at 50% of the block)
</p>
<p
v-observe-visibility="{
callback: (isVisible, entry) => pushNewHash(isVisible, entry, 'center'),
intersection: {
threshold: 0.7,
},
}"
style="background-color: hsl(210, 17%, 40%); color: hsl(0, 0%, 100%); height: 100vh"
>
center block (triggered if at least 70% of the block visible aka threshold value)
</p>
<p
v-observe-visibility="{
callback: (isVisible, entry) => pushNewHash(isVisible, entry, 'end'),
intersection: {
threshold: 0.3,
},
}"
style="background-color: hsl(210, 50%, 13%); color: hsl(0, 0%, 100%); height: 100vh"
>
end block (triggered if at least 30% of the block visible aka threshold value)
</p>
</div>
</template>
<script>
import Vue from 'vue'
import { ObserveVisibility } from 'vue-observe-visibility'
Vue.directive('observe-visibility', ObserveVisibility)
export default {
methods: {
resetHashUrl(isVisible, _entry) {
if (isVisible) history?.replaceState(null, null, ' ')
},
pushNewHash(isVisible, _entry, newHash) {
if (isVisible) location.hash = newHash
},
},
}
</script>
它依赖于vue-observe-visibility并且工作正常,不需要很多配置!
如果您正在寻找像this one这样更简单的滚动间谍程序,您可以使用这个包:https://github.com/ibufu/vue2-scrollspy
使用可能更适合的示例进行编辑。 如果要根据所在的路由应用某些类,或者要为其传递参数,请使用此代码段。
<template>
<div>
<button :class="{ 'custom-class': isOnSpecificPath('/test') }">Click me</button>
<button :class="{ 'custom-class': isOnSpecificPath('/index') }">Click me</button>
</div>
</template>
<script>
export default {
methods: {
isOnSpecificPath(pathToTest) {
return this.$route.path === pathToTest
},
},
}
</script>
<style>
.custom-class {
color: hsl(39, 100%, 46%);
font-weight: 700;
}
</style>
相关文章