我指的是 Bootstrap Vue Scrollspy(https://bootstrap-vue.org/docs/directives/scrollspy/#scrollspy)。我正在使用 Nuxt js。我的元素被正确引用并且正在监视内容。我想在 div 中更新当前正在查看的元素/部分。我知道一个活动类被添加到正在查看的元素/部分,但我不确定如何获取它。这就是我所拥有的: <div id="mobilescrollspy"> <--- Scrollspy headings in a dropdown <b-nav v-b-scrollspy> <b-nav-item-dropdown text="Dropdown"> <b-dropdown-item class="text-base self-center" href="#item-1"> Item 1 Heading </b-dropdown-item> <b-dropdown-item class="text-base self-center" href="#item-2"> Item 2 Heading </b-dropdown-item> <b-dropdown-item class="text-base self-center" href="#item-3"> Item 3 Heading </b-dropdown-item> </b-nav-item-dropdown> </b-nav></div><div class="content"> <--- The content itself <div id="item-1"> This is the content for item 1 </div> <div id="item-2"> This is the content for item 2 </div> <div id="item-3"> This is the content for item 3 </div></div>如果项目 2 在视图中,我想要一个显示:“项目 2 标题”的文本,一旦我滚动到项目 3,这个 div 就会更新为“项目 2 标题”。我怎样才能做到这一点?谢谢您的帮助!
1 回答
莫回无
TA贡献1865条经验 获得超7个赞
scrollspy文档中记录的事件侦听器为您提供id
当前活动元素的。您可以使用它来显示您想要的任何内容。
我在这里举了一个基本的例子:https ://codesandbox.io/s/competent-cherry-o4o6h?file=/src/App.vue
它是基本的,因为它查询$el
以查找活动元素并获取它的 innerHTML。相反,在真正的应用程序中,您可以直接引用导航中的对象,该对象首先用于呈现导航(因此避免查询 DOM)。
getSectionTitle
为了创建这个例子,我只使用了文档中的代码,我添加了一个计算属性((就像 scrollspy 不再选择任何元素一样)。所以我添加了一个scrollListener
, in mounted
, remove in beforeDestroy
,当#nav-scorller
滚动到顶部时,它会重置section
为''
.
除此之外,这是非常基本的。
同样,这个额外的监听器并不是真正需要的。我只是认为展示它是如何完成的会很好,作为未来可能需要它的任何人的榜样。
添加回答
举报
0/150
提交
取消