• vue切换Tab标签滚到相应位置,鼠标滚轮滚动,tab标签自动切换到相应位置


    <div class="tablist">
            <a :class="{active : activeBtn === 0}" @click="goAnchor('#anchor-0',0)"><span>*</span> 基础信息</a>
            <a :class="{active : activeBtn === 1}" @click="goAnchor('#anchor-1',1)"><span>*</span> 补助范围</a>
            <a :class="{active : activeBtn === 2}" @click="goAnchor('#anchor-2',2)"><span>*</span> 计算公式</a>
          </div>
          <div id="tabcon" style="display:inline-block;760px;">
            <div class="el-dialog-div">
              <el-scrollbar ref="scrollbar" wrap-class="scrollbar-wrapper">
                <el-form
                  ref="addForm"
                  :model="formInline"
                  inline
                  :rules="rules"
                  :disabled="pageType==='detail'"
                >
                  <div id="anchor-0">... </div>
                  <div id="anchor-1">... </div>

        <div id="anchor-2">... </div>

    方法:

    // 锚点跳转
        goAnchor(selector, index) {
          this.activeBtn = index
          this.$el.querySelector(selector).scrollIntoView()
        },
        /**
         * 滑轮滚动事件 返回滑轮距顶部的距离  author-1距离顶422  author-2:722
         * */
        handleScroll(e) {
          const scrollbarEl = this.$refs.scrollbar.wrap
          scrollbarEl.onscroll = (e) => {
            if (scrollbarEl.scrollTop < 300) {
              this.activeBtn = 0
            } else if (scrollbarEl.scrollTop > 300 && scrollbarEl.scrollTop < 422) {
              this.activeBtn = 1
            } else if (scrollbarEl.scrollTop > 422) {
              this.activeBtn = 2
            }
          }
        },
  • 相关阅读:
    Docker 私有仓库高级配置
    Docker 私有仓库
    Docker Hub
    访问 Docker 仓库
    Docker 删除容器
    392. 判断子序列
    605. 种花问题
    122. 买卖股票的最佳时机 II
    121. 买卖股票的最佳时机
    406. 根据身高重建队列
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/14150525.html
Copyright © 2020-2023  润新知