zoukankan      html  css  js  c++  java
  • 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
            }
          }
        },
  • 相关阅读:
    C# winform开发:Graphics、pictureBox同时画多个矩形
    C# “配置系统未能初始化” 异常解决
    Google Maps API V3 之 路线服务
    Google Maps API V3 之 图层
    Google Maps API V3 之绘图库 信息窗口
    Google 地图 API V3 之 叠加层
    驱动开发之libusb函数
    libusb的使用教程和例子
    libusb检测U盘插入
    使用libusb检测USB设备插拔状态
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/14150525.html
Copyright © 2011-2022 走看看