vue添加锚点,实现滚动页面时锚点添加相应的class操作


Posted in Javascript onAugust 10, 2020

第一步,给vue页面添加锚点

.orange{
  color: #f97910;
}
<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>
tabclick(index){
  this.current=index;
  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函数

vue添加锚点,实现滚动页面时锚点添加相应的class操作

图1 markdown.slugify函数

点击图中的source,跳转到GitHub的工程页面,可以看到如下的代码段:

// 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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
Js apply方法详解
Feb 16 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
vue 实现锚点功能操作
Aug 10 #Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 #Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 #Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 #Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 #Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 #Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 #Javascript
You might like
PHP编码规范-php coding standard
2007/03/16 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
JS的反射问题
2010/04/07 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python写日志封装类实例
2015/06/28 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python判断输入日期为第几天的实例
2018/11/13 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
金讯Java笔试题目
2013/06/18 面试题
公司周年庆典策划方案
2014/05/17 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python