vue 目录展开选中后能在滚动条上显示 | 导航栏选中 - 滚动居中

最新推荐文章于 2022-04-06 10:55:43 发布

林间风雨

最新推荐文章于 2022-04-06 10:55:43 发布

阅读量169

点赞数

分类专栏： js vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/jack_rose_me/article/details/120849514

版权

js 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

vue

25 篇文章 0 订阅

订阅专栏

本文介绍了一段Vue.js代码，用于实现网页导航栏的滚动效果。通过监听`tabClick`事件，根据点击的索引值动态调整导航栏的滚动位置。当索引超过4时，计算并设置`sort_nav_id`的`scrollLeft`属性，否则将滚动位置重置为0。这段代码展示了Vue.js结合JavaScript进行页面交互的基本用法。

摘要由CSDN通过智能技术生成

            <ul class="sort_nav" ref="sort_nav_id">
              <li>
              <a href="javascript:;" :class="currentSortParentCatalogId === '' ? 'current' : ''" @click='clickAllSortCatalog'>全部</a><span></span>
              </li>
              <li v-for="(navCatalog, index) in navSortParentCatalogList" ref="navCatalogList">
                  <a href="javascript:;" :class="currentSortParentCatalogId === navCatalog.id ? 'current' : ''"
                  @click='clickSortCatalog(navCatalog.id)'>{{navCatalog.catalogName}}</a>
                  <span></span>
              </li>
              <li><a href="#" style="width: 150px" /></li>
            </ul>

      tabClick (index) {
        if (index > 4) {
          let liWidth = this.$refs.navCatalogList
          let totalNum = 0
          let indexLength = Number(index)
          for (let i = 0; i < indexLength + 1; i++) {
            totalNum += liWidth[i].clientWidth
          }
          this.$refs.sort_nav_id.scrollLeft = totalNum
        } else {
          this.$refs.sort_nav_id.scrollLeft = 0
        }
      },