vue添加锚点,实现滚动页面时锚点添加相应的class操作
第一步,给vue页面添加锚点
.orange{ color:#f97910; }
{{item}}
第一步,给vue页面添加锚点
.orange{ color:#f97910; }
{{item}}
tabclick(index){ this.current=index; letanchorElement=document.getElementById(index); if(anchorElement){anchorElement.scrollIntoView();} },
第二步:给class为productDetail的 第三步,添加监听事件 注:给最外层div添加height:100%后,mint-ui的轮播图就会展示不出来。我们可以修改mint-ui的默认overflow属性,改为:overflow:visible 补充知识:使用Vuepress自动生成markdown的目录时,一旦标题有数字时便无法跳转的问题解决 问题描述 最近在用vuepress写网页文档的时候发现了一个问题,就是我用markdown书写的标题中如果有类似1.2XXX的标题时,当使用官方文档给出的: [[toc]] 自动生成目录时,最终生成的网页,含有数字的标题是无法跳转到相应位置的。 问题分析 查看官方开发文档后发现,这跟vuepress的默认配置有关,从如图1所示markdown.slugify函数可以看到,我们需要修改其配置。 markdown.slugify函数 图1markdown.slugify函数 点击图中的source,跳转到GitHub的工程页面,可以看到如下的代码段: 看到了其中有一句ensureitdoesn'tstartwithanumber(#121),可以知道这就是问题所在: //ensureitdoesn'tstartwithanumber(#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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。 声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
.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
}elseif(this.scrollTop<460&&this.scrollTop>=360){
this.current=1
}else{
this.current=0
}
},
},
mounted(){
//scoll滚动事件监听
varpro_detail_page=document.getElementsByClassName('productDetail')[0];
pro_detail_page.addEventListener('scroll',this.handleScroll);
},
//string.jsslugifydropsnonasciicharssowehaveto
//useacustomimplementationhere
//@ts-ignore
import{removeasremoveDiacritics}from'diacritics'
//eslint-disable-next-lineno-control-regex
constrControl=/[\u0000-\u001f]/g
constrSpecial=/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g
export=functionslugify(str:string):string{
returnremoveDiacritics(str)
//Removecontrolcharacters
.replace(rControl,'')
//Replacespecialcharacters
.replace(rSpecial,'-')
//Removecontinousseparators
.replace(/\-{2,}/g,'-')
//Removeprefixingandtrailingsepartors
.replace(/^\-+|\-+$/g,'')
//ensureitdoesn'tstartwithanumber(#121)
.replace(/^(\d)/,'_$1')
//lowercase
.toLowerCase()
}
热门推荐