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的gzip静态压缩方法
Jan 05 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
vue跨域解决方法
Oct 15 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
js实现简单图片拖拽效果
Feb 22 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
浅谈php和.net的区别
2014/09/28 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
提高网站信任度的技巧
2008/10/17 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue中锚点的三种方法
2018/07/06 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
JS实现星星海特效
2019/12/24 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python分割文件的常用方法
2014/11/01 Python
简介Django中内置的一些中间件
2015/07/24 Python
Java及python正则表达式详解
2017/12/27 Python
python基于ID3思想的决策树
2018/01/03 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
django中forms组件的使用与注意
2019/07/08 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python实现学生管理系统开发
2020/07/24 Python
简述 Python 的类和对象
2020/08/21 Python
大学专科生推荐信范文
2013/11/23 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL