美文网首页
移动端 vue 中实现锚点定位

移动端 vue 中实现锚点定位

作者: WEB小晶 | 来源:发表于2019-05-18 13:18 被阅读0次

    期望效果:点击每个锚点,能够定位到锚点所在的位置。(代码规范采用的是eslint)

    简单粗暴代码如下所示:

    <div class="anchorPointBox">

            <a

              :key="index"

              @click="goAnchor('#anchor-'+index)"

              v-for="(item,index) in columns"

              class="anchorPoint"

              :class="{active:index==nowIndex}"

            >{{ item.columnName }}</a>

          </div>

    goAnchor (selector) {

          this.nowIndex = selector.slice(8, 9);

          const anchor = this.$el.querySelector(selector);

          this.$el.querySelector(selector).scrollIntoView();

        }

    效果图如图:

    相关文章

      网友评论

          本文标题:移动端 vue 中实现锚点定位

          本文链接:https://www.haomeiwen.com/subject/qnftzqtx.html