vue table elementUI el-steps 锚点功能_elementui 锚点-程序员宅基地

技术标签: vue  elementui  el-steps  table  

<tr class="step-jump"></tr>
<tr class="step-jump"></tr>
<div style="position:fixed;top:25%;right:0;">
          <el-steps
            direction="vertical"
            finish-status="wait"
            space="50px"
            :active="activeStep">
            <el-step
              v-for="(item, index) in stepsArr"
              :key="index"
              :title="item.title"
              @click.native="jump(index)">
            </el-step>
          </el-steps>
 </div>
js:
data() {
    return {
      activeStep: 0,
      scrollTop: 0, // 没用到
      stepsArr: [
        { title: '一般状况' },
        { title: '生活方式' },
        { title: '脏器功能' },
        { title: '查体' },
        { title: '辅助检查' },
        { title: '现存主要健康问题' },
        { title: '住院治疗情况' },
        { title: '主要用药情况' },
        { title: '非免疫规划预防接种史' },
        { title: '健康评价' },
        { title: '健康指导' }
      ]
    }
  },
mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
methods:{
  // 当元素滚动条被滚动时运行的脚本
    onScroll() {
      // var box = document.getElementById('box')
      // var t = document.documentElement.scrollTop || document.body.scrollTop
      // box.style.top = t + 'px'

      var jump = document.querySelectorAll('.step-jump')
      var distance =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop
      jump.forEach((item, index) => {
        if (distance >= item.offsetTop) {
          this.activeStep = index
        }
      })
    },
    // 锚点点击
    jump(index) {
      console.log(index)
      this.activeStep = index
      // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
      // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
      let jump = document.querySelectorAll('.step-jump')
      // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
      let total = jump[index].offsetTop
      console.log(total)
      // scrollTop滚动条距离页面的距离
      let distance =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop
      // console.log(distance)
      // 平滑滚动,时长500ms,每10ms一跳,共50跳
      let step = total / 50
      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total
        step = newTotal / 50
        smoothUp()
      }
      function smoothDown() {
        if (distance < total) {
          distance += step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          window.pageYOffset = distance
          setTimeout(smoothDown, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
          window.pageYOffset = total
        }
      }
      function smoothUp() {
        if (distance > total) {
          distance -= step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          window.pageYOffset = distance
          setTimeout(smoothUp, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
          window.pageYOffset = total
        }
      }
    }
}

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43173924/article/details/89712642

智能推荐

mysql join 锁表_MySQL 两表join时加锁情况-程序员宅基地

文章浏览阅读713次。MariaDB [test]>desc leouser_inno;+-------+--------------+------+-----+---------+-------+| Field | Type | Null | Key | Default | Extra |+-------+--------------+------+-----+---------+-------..._mysql join 使用锁有效么

在jsp中同一页面中多个标签页之间切换数据展示-程序员宅基地

文章浏览阅读1.8k次。示例图片:像这样的上面多个tab页下面也有多个tab页面,其实只要学会一个嵌套就可以了,现在就说一下简单的一个页面的多个tab页面的展示转载于:https://www.cnblogs.com/smile-nn/p/7868094.html..._jsp页面在一个div里面用页签显示多个页面

Vuforia插件导入UnityAR摄像头突然不启用了-程序员宅基地

文章浏览阅读1.9k次。如需转载请保留本文连接。问题:导入Vuforia插件不启用摄像头,之前都能启用笔记本摄像头的,突然新建工程就不启用了。看看这个对勾有没有勾选上,虽然之前的工程是勾选上了也能打开摄像头,但是之后新建的工程同样勾选摄像头就不调用了,去掉对勾立马能用,就酱吧。转载于:https://www.cnblogs.com/yikecaidechengzhangshi/p/7110236.html..._vuforia 摄像头没启用

关于Windows10中使用预览窗格无法预览Excel及图片文件的问题_microwsoftofficeexcel流览器出现错误,无法预览此文件。咋办?-程序员宅基地

文章浏览阅读8.5w次,点赞7次,收藏22次。Windows版本:Windows10家庭中文版Office版本:Office2016专业中文版64位1.开启"预览窗格"功能 在"文件资源管理器"的菜单中选择"查看—预览窗格",或者使用快捷键Alt-P2.无法预览图片的问题 1)在"文件资源管理器"中,右键点击"此电脑",选择"属性";或者在桌面中右键点击"此电脑",选择"属性" 2)选择_microwsoftofficeexcel流览器出现错误,无法预览此文件。咋办?

Android Studio无法调试运行app的解决_there are no runners for android app:-程序员宅基地

文章浏览阅读5.3w次,点赞4次,收藏32次。-----------------------------------------------------------------------------------------------遇到的问题:问题1.新建一个名为HelloWorld的project后无论链接真机调试还是用Android Studio自带的模拟器调试,均无任何结果,app安装不到真机或者模拟机上面。(注:真机和_there are no runners for android app:

2020年四川全国计算机二级报名时间,2020年9月四川计算机二级考试时间-程序员宅基地

文章浏览阅读909次。小伙伴们注意啦!2020下半年四川计算机二级考试时间已经公布,下面就和小编一起去看一下相关信息吧!2020下半年四川计算机二级考试时间考试时间:2020年9月26日至28日。报名时间为:2020年7月27日14:00至8月3日18:00。考生通过报名系统完成用户注册、信息填报、选择考点、选择报考科目、上传照片、网上缴费等报名程序。考生可查询各考点的考试科目、限报科次、限报人数等相关信息,根据本人情...

随便推点

mybatis打印日志的log4j.xml配置_"<param name=\"conversionpattern\" value=\"[%d{dd/-程序员宅基地

文章浏览阅读7.5k次。ORIGINAL:http://blog.csdn.net/tadpole1027/article/details/6744044_""

oracle带数据的表生成DDL,Oracle中提取DDL-程序员宅基地

文章浏览阅读301次。1、提取数据库中创建表空间的DDLSET SERVEROUTPUT ONSET LINESIZE 1000SET FEEDBACK OFFset long 999999SET PAGESIZE 1000SELECT DBMS_METADATA.GET_DDL('TABLESPACE',TS.tablespace_name) FROM DBA_TABLESPACES TS;2、得到所有创建用户的dd..._表格内容转ddl语句

STL教程:C++ STL快速入门(非常详细)_stl教程:c++ stl快速入门(非常详细) (biancheng.net)-程序员宅基地

文章浏览阅读9k次,点赞43次,收藏532次。网址  http://c.biancheng.net/stl/STL 是“Standard Template Library”的缩写,中文译为“标准模板库”。STL 是 C++ 标准库的一部分,不用单独安装。C++ 对模板(Template)支持得很好,STL 就是借助模板把常用的数据结构及其算法都实现了一遍,并且做到了数据结构和算法的分离。例如,vector 的底层为顺序表(数组),list 的底层为双向链表,deque 的底层为循环队列,set 的底层为红黑树,hash_set 的底层为哈._stl教程:c++ stl快速入门(非常详细) (biancheng.net)

Unity项目发布后屏幕自适应问题_unity2d 发布后-程序员宅基地

文章浏览阅读1w次,点赞8次,收藏33次。作者文字纯手打,请珍惜劳动成果,如需转载请联系作者,个人主页soundbird.cn阅读此篇文章之前,你应该初步熟悉Unity的UGUI系统操作。 如果仅想实现屏幕自适应,那么只需观看斜体带下划线的文字即可,其他的文字都是解释。我们都知道,不同的设备,屏幕分辨率也通常是不同的,我们开发游戏或者应用的时候肯定要考虑到这个问题,总不能只在开发者你的手机上运行吧,那么这篇文..._unity2d 发布后

C#叠加合并半透明图像的两种实现_c# 图片a混合-程序员宅基地

文章浏览阅读5k次。C#叠加合并半透明图像说明方案一:系统自带 GDI+ 实现方案二:使用 EmguCV 实现总结说明OpenCV作为一个图像库,竟然没有提供一个直接的函数去做这件事情。这里使用系统自带的GDI和EmguCV(C#封装的OpenCV)分别实现了叠加合并两张半透明图像的功能。两个半透明颜色色的叠加计算方法透明颜色混合算法方案一:系统自带 GDI+ 实现/// using System.Dr..._c# 图片a混合

STP(生成树协议)和阻塞端口实验_生成树如何确定阻塞端口-程序员宅基地

文章浏览阅读1.3w次,点赞9次,收藏52次。一、 STP是什么生成树协议STP(spanning tree protocol),STP(Spanning Tree Protocol)是生成树协议的英文缩写,可应用于计算机网络中树形拓扑结构建立,主要作用是防止网桥网络中的冗余链路形成环路工作。二、STP的基本原理STP的基本原理是,通过在交换机之间传递一种特殊的协议报文的,网桥协议数据单元(Bridge Protocol Data Unit,简称BPDU),来确定网络的拓扑结构。BPDU有两种,配置BPDU(Configuration BPDU_生成树如何确定阻塞端口

推荐文章

热门文章

相关标签