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 拖拉缩放效果
Dec 10 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
sails框架的学习指南
Dec 22 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
Vue 组件注册实例详解
Feb 23 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多个字符串替换成同一个的解决方法
2013/06/18 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
浅谈React高阶组件
2018/03/28 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python简易远程控制单线程版
2018/06/20 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
提升python处理速度原理及方法实例
2019/12/25 Python
pymysql的简单封装代码实例
2020/01/08 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python