第一步，给vue页面添加锚点
.orange{
color: #f97910;
}
{{item}}.........
tabclick(index){
this.current=index;
let anchorElement = document.getElementById(index);
if(anchorElement) { anchorElement.scrollIntoView(); }
},
第二步：给class为productDetail的 第三步，添加监听事件 注：给最外层div添加height:100%后，mint-ui的轮播图就会展示不出来。我们可以修改mint-ui的默认overflow属性,改为：overflow:visible 补充知识：使用Vuepress自动生成markdown的目录时，一旦标题有数字时便无法跳转的问题解决 问题描述 最近在用vuepress写网页文档的时候发现了一个问题，就是我用markdown书写的标题中如果有类似 1.2 XXX 的标题时，当使用官方文档给出的: 自动生成目录时，最终生成的网页，含有数字的标题是无法跳转到相应位置的。 问题分析 查看官方开发文档后发现，这跟vuepress的默认配置有关，从如图1所示markdown.slugify函数可以看到，我们需要修改其配置。 markdown.slugify函数 图1 markdown.slugify函数 点击图中的source，跳转到GitHub的工程页面，可以看到如下的代码段： 看到了其中有一句ensure it doesn't start with a number (#121)，可以知道这就是问题所在： // ensure it doesn't start with a number (#121) .replace(/^(\d)/, '_$1') 我们的标题数字被这句代码替换掉了，导致最终的链接根本没有指向标题，故无法跳转。 问题解决 根据GitHub页面上的配置路径，找到自己安装的vuepress模块的配置路径，我的路径是： D:\my_program\nodejs\node_global\node_modules\vuepress\node_modules\@vuepress\shared-utils\lib\slugify.js 打开 slugify.js 文件，并将上述的代码段注释掉，问题即可解决。 以上这篇vue添加锚点,实现滚动页面时锚点添加相应的class操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。部分加height:100%;overflow-y: scroll;
.productDetail {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
document.getElementsByClassName('productDetail')[0]; vue中同理于：this.$refs.content
methods:{
handleScroll(el) {
this.scrollTop = this.$refs.content.scrollTop;
if (this.scrollTop >= 460) {
this.current = 2
} else if (this.scrollTop <460 && this.scrollTop >= 360) {
this.current = 1
} else {
this.current = 0
}
},
},
mounted() {
//scoll滚动事件监听
var pro_detail_page = document.getElementsByClassName('productDetail')[0];
pro_detail_page.addEventListener('scroll', this.handleScroll);
},
[[toc]]
// string.js slugify drops non ascii chars so we have to
// use a custom implementation here
// @ts-ignore
import { remove as removeDiacritics } from 'diacritics'
// eslint-disable-next-line no-control-regex
const rCOntrol= /[\u0000-\u001f]/g
const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.&＃63;/]+/g
export = function slugify (str: string): string {
return removeDiacritics(str)
// Remove control characters
.replace(rControl, '')
// Replace special characters
.replace(rSpecial, '-')
// Remove continous separators
.replace(/\-{2,}/g, '-')
// Remove prefixing and trailing separtors
.replace(/^\-+|\-+$/g, '')
// ensure it doesn't start with a number (#121)
.replace(/^(\d)/, '_$1')
// lowercase
.toLowerCase()
}
写下你的评论吧 !
推荐阅读
本文详细介绍了 PHP 5.2.5 的安装和配置步骤，帮助开发者解决常见的环境配置问题，特别是上传图片时遇到的错误。通过本教程，您可以顺利搭建并优化 PHP 运行环境。 ...
[详细]
蜡笔小新 2024-12-27 19:05:41
本文探讨了将自然语言转换为SQL语句（NL2SQL）的任务，这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践，该比赛提供了金融和通用领域的表格数据，并标注了对应的自然语言与SQL语句对，旨在训练准确的NL2SQL模型。 ...
[详细]
蜡笔小新 2024-12-27 17:36:19
本文介绍了一种适用于 Android 应用的 LED 数字字体（digital font），并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景，能够增强视觉效果。 ...
[详细]
蜡笔小新 2024-12-27 10:34:22
RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式，除了提供ViewHolder缓存模式，还可以自定义动画，分割符，布局样式，相比于传统的ListVi ...
[详细]
蜡笔小新 2024-12-26 20:24:01
![扫描线三巨头 hdu1928hdu 1255 hdu 1542 [POJ 1151]](https://img.php1.cn/3c972/245b5/42f/19446f78530d3747.jpeg)
学习链接：http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想，后期可以求解很 ...
[详细]
蜡笔小新 2024-12-26 20:04:36
本文详细介绍了如何在 Spring Boot 应用中通过 @PropertySource 注解读取非默认配置文件，包括配置文件的创建、映射类的设计以及确保 Spring 容器能够正确加载这些配置的方法。 ...
[详细]
蜡笔小新 2024-12-26 19:35:47
This document outlines the recommended naming conventions for HTML attributes in Fast Components, focusing on readability and consistency with existing standards. ...
[详细]
蜡笔小新 2024-12-26 19:13:45
本文详细介绍了Java中org.w3c.dom.Text类的splitText()方法，通过多个代码示例展示了其实际应用。该方法用于将文本节点在指定位置拆分为两个节点，并保持在文档树中。 ...
[详细]
蜡笔小新 2024-12-26 18:31:42
本文详细介绍了 Apache Jena 库中的 Txn.executeWrite 方法，通过多个实际代码示例展示了其在不同场景下的应用，帮助开发者更好地理解和使用该方法。 ...
[详细]
蜡笔小新 2024-12-26 17:55:52
在现代网络环境中，两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效，但其配置复杂、步骤繁琐，难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc，它不仅简化了操作流程，还提供了强大的加密和跨平台支持。 ...
[详细]
蜡笔小新 2024-12-26 16:16:06
题目Link题目学习link1题目学习link2题目学习link3%%%受益匪浅！－－－－－&# ...
[详细]
蜡笔小新 2024-12-26 15:55:56
在工作期间想要浏览微信和朋友圈却不太方便？虽然微信电脑版目前不支持直接刷朋友圈，但通过远程投屏技术，可以轻松实现在电脑上操作安卓设备的功能。 ...
[详细]
蜡笔小新 2024-12-26 15:23:19
网络运维工程师负责确保企业IT基础设施的稳定运行，保障业务连续性和数据安全。他们需要具备多种技能，包括搭建和维护网络环境、监控系统性能、处理突发事件等。本文将探讨网络运维工程师的职业前景及其平均薪酬水平。 ...
[详细]
蜡笔小新 2024-12-26 14:35:04
mobiledu2502857923
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
