为了账号安全,请及时绑定邮箱和手机立即绑定

如何获取活动元素/当前查看部分的标题并显示它

如何获取活动元素/当前查看部分的标题并显示它

繁星淼淼 2022-07-08 16:11:51
我指的是 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''.
除此之外,这是非常基本的。

同样,这个额外的监听器并不是真正需要的。我只是认为展示它是如何完成的会很好,作为未来可能需要它的任何人的榜样。


查看完整回答
反对 回复 2022-07-08
  • 1 回答
  • 0 关注
  • 70 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信