vue锚点导航

2023-10-29



//在box中
 <div :id="gernerateId(index)" class="scrooltop" :class="{topone:flagindex==index}" v-for="(val,index) in data" :key="index">

gernerateId(index) {
      return "box" + index;
    },




//在锚导航中
<ul>
     
            <li class="leftlist" :class="{leftactive:flagindex==index}" @click.prevent="custormAnchor('box'+index)" v-for="(val,index) in data"
              :key="index">
              <a class='aa' :id="leftId(index)" href="javascript:;" @mouseover="enter(index)" @mouseout="enter(-2)">
                <img :src="val.account_img" alt="">
                <img v-show="flagindex==index" class="imgleft" :src="val.vector_img" height="25" alt="">
              </a>
            </li>
           
          </ul>
//点击导航时 跳到对应的id
custormAnchor(anchorName) {
      // 找到锚点
      let anchorElement = document.getElementById(anchorName);
      // 如果对应id的锚点存在,就跳转到锚点
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
    },


当页面滚动时 监听页面高度  再定位到某个锚点

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue锚点导航 的相关文章

  • python时间序列动图_Python绘制时间序列数据的时序图、自相关图和偏自相关图

    时序图 自相关图和偏相关图是判断时间序列数据是否平稳的重要依据 本文涉及的扩展库numpy pandas statsmodels一般可以使用pip进行在线安装 如果安装失败 可以到http www lfd uci edu gohlke py
  • Java 基本命名规则

    一 项目名称 所有单词全部用小写 如 testjavaproject studentmanagement等 二 Java project中相关命名 1 包名 包名统一使用小写 点分隔符之间有且仅有一个自然语义的英语单词 用域名反过来写 不会
  • 关于uni-app课程开发的一心一得

    在当今互联网和移动互联网的时代 APP成为了人们生活和工作中不可或缺的一部分 而对于开发者来说 如何快速 高效 跨平台地开发一款APP也成为了关注焦点 而Uni App就是一种可以快速开发跨平台APP的方式 通过一套代码可以同时发布到多个平
  • Python3《机器学习实战》学习笔记(四):朴素贝叶斯实战篇之新浪新闻分类

    一 朴素贝叶斯改进之拉普拉斯平滑 上篇文章提到过 算法存在一定的问题 需要进行改进 那么需要改进的地方在哪里呢 利用贝叶斯分类器对文档进行分类时 要计算多个概率的乘积以获得文档属于某个类别的概率 即计算p w0 1 p w1 1 p w2
  • cocos2d-html5 碰撞检测的几种方法

    游戏中的碰撞还是比较多的 比如角色与角色的碰撞 角色与墙壁的碰撞 角色与怪物的碰撞等 都需要 进行碰撞的检测 来触发一定的事件 最近在尝试制作一个小游戏的时候需要用到碰撞检测 然后就查了下资料 并在论坛进行提问等算是找到了比较满意的碰撞检测
  • 大白话用Transformer做Object Detection

    作者 张恒 单位 法国国家信息与自动化研究所 研究方向 目标检测 传感器融合 记录一下隔离期间学习的 DETR 1 系列文章 追求简单 清晰 易懂 分上下两部分 上篇介绍 DETR 的基本原理 下篇是针对 DETR 缺点的改进工作 大白话
  • Android动态权限申请框架

    XmPermissions 项目介绍 Android动态权限申请框架 Github地址 https github com lhm0603 XmPermissionsProject 使用说明 XmPermissions 支持 Android
  • 2020年蓝桥杯

    专栏 蓝桥杯题目 目录 一 门牌制作 二 跑步锻炼 三 蛇形填数 四 排序 五 寻找2020 六 成绩统计 七 单词分析 八 数字三角形 九 平面切分 一 门牌制作 题目描述 小蓝要为一条街的住户制作门牌号 这条街一共有2020 位住户 门
  • 【NLP】第 1 章 : 语言模型简介

    使人不同于地球上其他动物物种的最大发展之一是语言的进化 这使我们能够交流和交流想法和思想 从而导致包括互联网在内的许多科学发现 这就是语言的重要性 因此 当我们涉足人工智能领域 时 除非我们确保机器能够理解和理解自然语言 否则在那里取得的进
  • 【linux】Grok Debugger本地安装过程

    1 概述 转载 https blog 51cto com fengwan 1758845 最近在使用ELK对日志进行集中管理 因为涉及到日志的规则经常要用到http grokdebug herokuapp com 进行调试 但是因为国内网络
  • nacos配置中心将原来的配置读取到配置中心并且应用

    将模块的所有配置放到配置中心里去 刚才说了那么多 我们可以将数值储存在配置中心 及时调用 那么我们是否可以将我们之前的配置放到配置中心里呢 let s go 我们当前的配值如下 spring datasource username root
  • thymeleaf固定前端信息的循环次数

    thymeleaf固定前端信息的循环次数 div class part body div
  • ajax 禁止跨域,AJAX_解决AJAX中跨域访问出现''没有权限''的错误,禁止访问非同域的网站,下面一 - phpStudy...

    解决AJAX中跨域访问出现 没有权限 的错误 禁止访问非同域的网站 下面一个例子来访问http www google cn function createobj if window ActiveXObject return new Acti
  • 鱼类识别系统:基于深度学习的生态保护与渔业管理利器【鱼类识别

    请接收一份来自大厂的保姆级面试稿 如何优雅的介绍自己的项目经验 诺瓦一面后测评 合肥就业求职好公司及薪资汇总 基恩士全流程 已测评等消息中 有无学历厂推荐 2023基恩士面经 送上一首凉凉 虹软24届校招提前批 笔试本周日开始 算法类看这里
  • Nginx的upstream_response_time

    转载请注明文章出处 tlanyan me upstream re 前几日为了查看FPM的性能 在Nginx的配置里增加FPM响应时间的header http server location php add header X Upstream
  • python3 dataframe中列数据为字典,拆分成多列或转存某个关键字的值

    下载到的数据里常有某列中为字典格式的数据 想把字典中的数据独立成列方便读取 或者读取字典中某个关键字的值独立存放 例如 A列中字典关键字type1的值存放到B列 解决思路 1 将A列格式转换为列表 2 列表再转换为dataframe 3 直
  • Linux 代理服务器 squid 安装和使用 [正向代理]

    目录 什么是 squid 相关版本 代理服务器相关配置 squid 安装 启动 squid 服务 修改配置文件 设置需要代理的 ip 查看服务运行状态 客户端的使用 软件自带代理功能 mac 网络偏好设置 全局代理 指定应用程序走代理 什么
  • ES6系列教程第四篇--asyn详解

    一 什么是async async其实是ES7的才有的关键字 放在这里说 其实是和我们前面所说的Promise Generator有很大关联的 async的意思是 异步 顾名思义是有关异步操作有关的关键字 下面我们就来构造一个async方法
  • 2022国赛数模使用的java代码

    Test public void test3 把excel直接复制过来的矩阵 插入逗号 Double data new Double 14 14 Scanner in new Scanner System in for int i 0 i

随机推荐

  • C/C++:MSVC与GCC的常见区别

    今天看别人的代码 忽然发现有人定义了变量长度的数组 我用msvc new数组new了好几年 原来gcc不用new 巨硬害我 巨硬害我 巨硬坑太多了 此生不再用巨硬 msvc不能定义常量长度的数组 而gcc可以 msvc的memcpy可以不包
  • IPSec基础-密钥交换和密钥保护

    Internet密钥交换 IKE 两台IPSec计算机在交换数据之前 必须首先建立某种约定 这种约定 称为 安全关联 指双方需要就如何保护信息 交换信息等公用的安全设置达成一致 更重要的是 必须有一种方法 使那两台计算机安全地交换一套密钥
  • 简单的模糊查询

    使用js在输入框输入内容 即可查询对应数据 代码如下
  • Ant Design Pro V5精讲(实践篇一):自定义登录界面、主界面

    用户需求 登录界面改造成自己的 主界面的logo及产品名称改造成自己的 语言包去掉或者只留中英语言包 登录界面改造 进入pages user login目录找到index tsx 去掉语言包栏目 div 南极客 2021 5 8 去掉国际化
  • hydra详解(仅供学习参考)

    一 概述 Hydra是一款非常强大的渗透工具 由著名的黑客组织THC开发的一款开源工具 二 使用方法 hybra基础语法 hydra 参数 IP 服务 参数 l login 小写 指定用户名进行破解 L file 大写 指定用户的用户名字典
  • Java获取两个时间里的所有月份集合

    背景 有两个时间 获取这两个时间里的所有月份集合 话不多说 上代码 AlarmDateUtil java public static List
  • CTF-AWD入门手册

    引文 AWD赛制是一种网络安全竞赛的赛制 AWD赛制由安全竞赛专家及行业专家凭借十多年实战经验 将真实网络安全防护设备设施加入抽象的网络环境中 模拟政府 企业 院校等单位的典型网络结构和配置 开展的一种人人对抗的竞赛方式 考验参赛者攻防兼备
  • 自动化控制编程软件(PLC/软PLC/Labviw/C#)特点

    一 PLC 什么是PLC PLC就是可编程控制器 是一种数字运算操作的电子系统 专为工业环境而设计 它采用了可编程序的存储器 用来在其内部存储逻辑运算 顺序控制 定时 计数和算术运算等操作的基于用户的指令 并通过数字式和模拟式的输入和输出
  • GPU通用计算(GPGPU)——将图形处理器用于高性能计算领域

    1 1 研究背景和意义随着当前计算机性能的不断提高 应用范围越来越广泛 不同的计算任务和计算需求都在快速增长 这就决定了处理器朝着通用化和专用化两个方向飞速发展 一方面 以CPU为代表的通用处理器是现代计算机的核心部件 经过多次器件换代的变
  • 【廖雪峰python进阶笔记】类的继承

    1 继承 如果已经定义了Person类 需要定义新的Student和Teacher类时 可以直接从Person类继承 class Person object def init self name gender self name name
  • int值太大造成数据溢出会变成负数的原因和解决方案

    这里造成数据溢出 造成负数的原因 原码 反码和补码的资料 十进制数字存储在计算机时要转换为二进制 数字在累加的时候会不断进位 超过最大范围时符号位就变成了1 1表示的是负数 计算机就理解成这是个负数了 java各种类型的数据范围 long
  • ORA-01841 :(完整)年份必须介于-4713和+9999之间,而不是0 Kaki的博客

    ORA 01841 完整 年份必须介于 4713和 9999之间 而不是0 Kaki的博客 我遇到这个问题的原因是因为数据中有空格 导致tochar 无法正常解析 请检查是否是数据问题 欢迎点赞关注收藏哦 码云 B站搜索KakiNakaji
  • 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?

    创建可反复使用的外部CSS样式表 用DreamWeaver在某网页中创建了一种CSS样式后 如果你要在另外的网页中应用该样式 你不必从新创建该CSS样式 只要你创建了外部CSS样式表文件 externalCSSstylesheet 你便可以
  • python3 self的用法

    在 Python 中 self 是一个特殊的变量 每个类都应该有一个 self 变量 它是一个指针 指向调用该方法的对象本身 例如 在定义一个类的方法时 你需要给这个方法的第一个参数命名为 self 这样 在调用这个方法时 你不需要显式地传
  • Kali下安装sublime text3

    Kali下安装sublime text3 文章目录 一 sublime简介 二 kali下安装sublime的步骤 1 下载安装包 2 将安装包复制到某个文件下 3 在终端下打开文件 总结 一 sublime简介 Sublime Text
  • OpenCV-Python图像形态变换概述及morphologyEx函数介绍

    前往老猿Python博客 https blog csdn net LaoYuanPython 一 形态变换概念 图像形态变换又称为形态学图像处理 图像形态学 它是基于数学形态学 Mathematical Morphology 基础之上建立的
  • Vue3.x学习笔记(进阶)

    Vue3 x学习笔记 进阶 全局组件 局部组件 父子组件的静态传值 父子组件的动态传值 动态绑定函数 组件传值时的校验操作 单项数据流机制 Non props使用技巧 子组件调用父组件方法 传值 校验 slot 插槽默认值 具名插槽 具名插
  • PermissionError: [Errno 13] Permission denied

    错误 PermissionError Errno 13 Permission denied 错误原因 权限错误 errno 13 权限被拒绝 错误产生的原因是文件无法打开 可能产生的原因是文件找不到 或者被占用 或者无权限访问 或者打开的不
  • K最近邻算法

    一 原理 K最近邻算法 K Nearest Neighbor KNN 是最基本的分类算法 其基本原理是 从最近的K个邻居 样本 中 选择出现次数最多的类别作为判定类别 K最近邻算法可以理解为是一个分类算法 常用于标签的预测 如性别 实现KN
  • vue锚点导航

    在box中 div class scrooltop gernerateId index return box index 在锚导航中 ul li class leftlist li ul div