第一步,给vue页面添加锚点
1
2
3
|
.orange{
color : #f97910 ;
}
|
1
2
3
4
5
6
7
8
9
10
|
< template >
< div class = "productDetail" ref = "content" >
< div class = "tabbar" >
< div @ click.prevent = "tabclick(index)" v-for = "(item,index) in productTile" :key = "index" :class = "{orange:index==current}" >{{item}}</ div >
</ div >
< div id = "0" >...</ div >
< div id = "1" >...</ div >
< div id = "2" >...</ div >
</ div >
< template >
|
1
2
3
4
5
|
tabclick(index){
this .current=index;
let anchorElement = document.getElementById(index);
if (anchorElement) { anchorElement.scrollIntoView(); }
},
|
第二步:给class为productDetail的<div>部分加height:100%;overflow-y: scroll;
1
2
3
4
5
6
7
|
.productDetail {
width : 100% ;
height : 100% ;
display : flex;
flex- direction : column;
overflow-y: scroll ;
}
|
第三步,添加监听事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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);
},
|
注:给最外层div添加height:100%后,mint-ui的轮播图就会展示不出来。我们可以修改mint-ui的默认overflow属性,改为:overflow:visible
补充知识:使用Vuepress自动生成markdown的目录时,一旦标题有数字时便无法跳转的问题解决
问题描述
最近在用vuepress写网页文档的时候发现了一个问题,就是我用markdown书写的标题中如果有类似 1.2 XXX 的标题时,当使用官方文档给出的:
[[toc]]
自动生成目录时,最终生成的网页,含有数字的标题是无法跳转到相应位置的。
问题分析
查看官方开发文档后发现,这跟vuepress的默认配置有关,从如图1所示markdown.slugify函数可以看到,我们需要修改其配置。
markdown.slugify函数
图1 markdown.slugify函数
点击图中的source,跳转到GitHub的工程页面,可以看到如下的代码段:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// 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~`!@ #$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/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()
}
|
看到了其中有一句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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/xiasohuai/article/details/88342635