建站资讯

微信小程序定制报价_vue添加锚点,完成滚动页面时

作者:admin 发布时间:2021-01-05
vue添加锚点,实现滚动页面时锚点添加相应的class操作       这篇文章主要介绍了vue添加锚点,实现滚动页面时锚点添加相应的class操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
div div @click.prevent="tabclick(index)" v-for="(item,index) in productTile" :key="index" : {{item}} /div /div div id="0" ... /div div id="1" ... /div div id="2" ... /div /div template
let anchorElement = document.getElementById(index); if(anchorElement) { anchorElement.scrollIntoView(); } },

第二步:给class为productDetail的 div 部分加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);

注:给最外层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的工程页面,可以看到如下的代码段:

// string.js slugify dro凡科抠图 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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。



收缩