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

2024-02-07 08:08:56

第一步，给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函数

图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操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue项目中锚点定位替代方式

在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转.所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document.getElementById('section') if (section) { section.scrollIntoView() } } html标签中绑定click事件就可以了以上这篇vue项目中锚点定位替代方式就是小编
浅谈vue 锚点指令v-anchor的使用

如下所示: export default { inserted: function(el, binding) { el.onclick = function() { let total; if (binding.value == 0) { total = 0; } else { total = document.getElementById(`anchor-${binding.value}`).offsetTop; } let distance = document.documentElemen
Vue监听滚动实现锚点定位(双向)示例

在项目需求中需要实现一个滚轴联动锚点的功能效果图如下: 功能代码demo如下: <template> <div class="container"> <div class="wrapper"> <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :ke
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应代码如下: 1.html结构(因为从项目里截取代码数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr"> <span v-
vue滑动吸顶及锚点定位的示例代码

在上篇文章给大家介绍了vue实现吸顶.锚点和滚动高亮按钮效果感兴趣的朋友可以点击查看https://www.jb51.net/article/172365.htm 今天给大家继续分享vue滑动吸顶及锚点定位的代码,具体内容如下所示: Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id='menu'> <ul> <li v-for=&q
vue 导航锚点_点击平滑滚动,导航栏对应变化详解

最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应代码如下: 1.html结构(因为从项目里截取代码,allMenuList数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr">
vue 实现锚点功能操作

最近遇到一个需求,进入页面,滚动到锚点位置. 如何实现? 在router文件下的index.js中配置: 1.配置 2.路由跳转 3.设置锚点最后,我遇到了一个问题,你npm run build 生成项目后测试,第一次进入成功,然后在页面中操作一波,刷新,网页打开失败, 显示找不到资源.(不知别人有没有遇到过) 解决方案:将router文件夹下index.js中的mode:"history" 注释掉. 补充知识:vue开发中,实现锚点定位及跳转(url不发生变化) 如下所示: &l
vue实现吸顶、锚点和滚动高亮按钮效果

因公司后台管理系统很多功能技术老旧,最近在用vue重构公司的后台管理系统,在做商品管理添加商品这一块,借鉴淘宝的添加商品的交互,需要实现一个简单的吸顶.锚点和滚动高亮按钮的效果. 需求滚动页面到顶部,实现某元素固定到顶部效果点击某个按钮,页面滚动到相应的位置滚动页面,当到达某个位置时,高亮对应的相关按钮元素吸顶实现方式关于元素吸顶效果,通过查阅相关资料和相关测试,有三种方式(还有一种是jquery的方法,这里就不介绍了) 一.使用position:sticky 1. 什么是positi
vue添加锚点,实现滚动页面时锚点添加相应的class操作

第一步,给vue页面添加锚点 .orange{ color: #f97910; } <template> <div class="productDetail" ref="content"> <div class="tabbar"> <div @click.prevent="tabclick(index)" v-for="(item,index) in productTile&
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

废话不说,上代码! <a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]"> <a-menu-item :key="'/home'"> <router-link to="home"> <a-icon type="user" /> <span>nav 1&l
vue返回上一页面时回到原先滚动的位置的方法

项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面. 思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1).在App.vue中加入: <template> <div id="app">  <!--页
基于vue监听滚动事件实现锚点链接平滑滚动的方法

基于vue监听滚动事件,实现锚点链接平滑滚动近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne
vue返回上一页面时不刷新问题及解决方案

目录返回上一页面时不刷新前景思路说明页面回退后,不刷新问题问题描述问题解决返回上一页面时不刷新前景在日常使用的时候,我们经常需要返回上一级页面的时候,不刷新页面,保持页面不变,这里就需要使用以下方法: 思路因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1).在App.vue中加入这里是所有页面切换到地方,下面代码分别对不同的设置,采用不同的渲染方式. <template> <div id="ap
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentE
vue页面切换到滚动页面显示顶部的实例

在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示. 一.目标: 'listview'进入详情页面时详情页面从页面顶部开始显示. 二.让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律三.解决思路:进入详情页面的时候固定滚动页面的位置在顶部四.代码实现:vue里面写法如下,至于updated生
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否
vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)

目录一.man.js引入二.使用三.常用API 直播平台源码,vue+vue-fullpage实现整屏滚动页面一.man.js引入 // An highlighted block import router from './router' Vue.config.productionTip = false // 整屏滚动 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js

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

相关推荐

随机推荐