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 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
初识Node.js
Mar 20 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python内置函数dir详解
2015/04/14 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Django日志模块logging的配置详解
2017/02/14 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
flask应用部署到服务器的方法
2019/07/12 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
python绘图模块之利用turtle画图
2021/02/12 Python
servlet面试题
2012/08/20 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
大学生暑期实践感言
2014/02/26 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
小学生植树节活动总结
2014/07/04 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
讲文明倡议书
2015/04/29 职场文书
新学期家长寄语2016
2015/12/03 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
Python list列表删除元素的4种方法
2021/11/01 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python