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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
微信小程序实现多图上传
Jun 19 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数据库类
2009/05/27 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
Javascript面向对象编程
2012/03/18 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
python3中布局背景颜色代码分析
2020/12/01 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
法律进社区活动总结
2015/05/07 职场文书
同学联谊会邀请函
2019/06/24 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis