返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中的锚点定位问题
  • 231
分享到

vue中的锚点定位问题

2024-04-02 19:04:59 231人浏览 安东尼
摘要

目录Vue锚点定位锚点定位与平滑滚动反定位支持锚点定位bug无效和替代方式在vue项目中定义一个方法不适用锚点定位vue锚点定位 锚点定位与平滑滚动反定位支持 代码如下 html

vue锚点定位

在这里插入图片描述

锚点定位与平滑滚动反定位支持

代码如下

html

<div style="display: flex;height: 442px;">
                       <el-tabs v-model="activeTabs" class="zxtabsStyle" tab-position="left" @tab-click="tabshandleClick">
                        <el-tab-pane label="主要致险情景" name="zxqj"></el-tab-pane>
                        <el-tab-pane label="风险防控基本要求" name="yq"></el-tab-pane>
                        <el-tab-pane label="管理措施" name="glcs"></el-tab-pane>
                       </el-tabs>
                       <div>
 //要切换滚动的内容区域
<div class="con_tab" ref="content">
    <div id="zxqj" class="conBlock">介绍</div>
    <div id="yq" class="conBlock">课程目录</div>
    <div id="glcs" class="conBlock">课后福利</div>
</div>

js

mounted(){
//1.mounted里面自动监听滚动事件   代码如下
this.$refs.content.onscroll = ()=>{
     this.handleScroll();
 }
},
methods:{
        handleScroll () {
     let scrollTop = this.$refs.content.scrollTop;
      let blocks = document.querySelectorAll('.conBlock');
      blocks.forEach((item, index) => {
        console.log("blocks",item.id)
          if (scrollTop >= item.offsetTop) {
              this.activeTabs = item.id;
          }
      })
  },
         tabshandleClick(data){
            console.log("data",data)
            let index=Number(data.index)
    let blocks = document.querySelectorAll('.conBlock');
    let step = 40;//滚动步长
    let currentScrollTop = this.$refs.content.scrollTop;
    let targetOffsetTop = blocks[index].offsetTop;
    console.log("currentScrollTop",currentScrollTop);
    console.log("targetOffsetTop",targetOffsetTop);
    if(currentScrollTop > targetOffsetTop){
        const smoothUp = ()=>{
            if(currentScrollTop >= targetOffsetTop){
                if (currentScrollTop - targetOffsetTop >= step) {
                    currentScrollTop -= step;
                    setTimeout(smoothUp,1);
                } else {
                    currentScrollTop = targetOffsetTop-step;
                }
                this.$refs.content.scrollTop = currentScrollTop;
            }
        };
        smoothUp();
    }else{
        const smoothDown = ()=>{
            if (currentScrollTop <= targetOffsetTop) {
                // 如果和目标相差距离大于等于step 就跳 step
                if (targetOffsetTop - currentScrollTop >= step) {
                    currentScrollTop += step;
                    setTimeout(smoothDown,1);
                } else {
                    // 否则直接跳到目标点,防止跳过
                    currentScrollTop = targetOffsetTop-step;
                }
                this.$refs.content.scrollTop = currentScrollTop;
            }
        };
        smoothDown();
    }
},
}

锚点定位bug无效和替代方式

在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转。

在vue项目中定义一个方法不适用锚点定位

scrollToSection(id) {
   let section = document.getElementById(id)
   if (section) {
      section.scrollIntoView()
   }
}

html标签中绑定click事件就可以了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中的锚点定位问题

本文链接: https://lsjlt.com/news/167717.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中的锚点定位问题
    目录vue锚点定位锚点定位与平滑滚动反定位支持锚点定位bug无效和替代方式在vue项目中定义一个方法不适用锚点定位vue锚点定位 锚点定位与平滑滚动反定位支持 代码如下 html ...
    99+
    2024-04-02
  • vue实现锚点定位功能
    本文实例为大家分享了vue实现锚点定位的具体代码,供大家参考,具体内容如下 这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 如果是获取浏览器的滚动高度,各个浏...
    99+
    2024-04-02
  • vue+element ui实现锚点定位
    本文实例为大家分享了vue + element ui 实现锚点定位的具体代码,供大家参考,具体内容如下 vue <el-row :gutter="20"> &l...
    99+
    2024-04-02
  • vue+element ui实现锚点定位的方法
    本篇内容主要讲解“vue+element ui实现锚点定位的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue+element ui实现锚点定位的方法”吧!本文实例为大家分享了vue + ...
    99+
    2023-06-20
  • vue实现锚点定位功能的方法
    这篇文章主要讲解了“vue实现锚点定位功能的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue实现锚点定位功能的方法”吧!本文实例为大家分享了vue实现锚点定位的具体代码,供大家参考,...
    99+
    2023-06-20
  • vue实现锚点定位的代码怎么写
    本篇内容主要讲解“vue实现锚点定位的代码怎么写”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue实现锚点定位的代码怎么写”吧!具体代码如下:vue<el-row :gutte...
    99+
    2023-07-04
  • vue中如何实现锚点定位平滑滚动
    目录vue锚点定位平滑滚动vue点击tabs平滑滚动(锚点事件)定义兼容使用vue锚点定位平滑滚动 下面是简单的代码,拿来即用 html  //给div盒子设定单击事件和r...
    99+
    2024-04-02
  • HTML中怎么创建锚点定位
    这篇文章主要介绍“HTML中怎么创建锚点定位”,在日常操作中,相信很多人在HTML中怎么创建锚点定位问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML中怎么创建锚点定位”...
    99+
    2024-04-02
  • 怎么使用vue实现锚点定位功能
    本文小编为大家详细介绍“怎么使用vue实现锚点定位功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用vue实现锚点定位功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。这里主要是实现了一个简单的滚动触发...
    99+
    2023-07-04
  • Android制作一个锚点定位的ScrollView
    目录完成效果图需求分析 怎么滚动?滚动到哪里?代码实现 锚点变化位置处理 查找最近两个View 计算距离 计算百分比 回调监听 因为遇到了一个奇怪的需求:将垂直线性滚...
    99+
    2024-04-02
  • pythontkinter中的锚点(anchor)问题及处理
    目录tkinter的锚点(anchor)问题tkinter中anchor参数几何管理方法place中anchor的含义tkinter的锚点(anchor)问题 tkinter中anc...
    99+
    2024-04-02
  • 微信小程序怎么实现锚点定位功能
    这篇“微信小程序怎么实现锚点定位功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么实现锚点定位功能”文章吧。实...
    99+
    2023-06-08
  • 微信小程序如何实现锚点定位功能
    这篇文章将为大家详细讲解有关微信小程序如何实现锚点定位功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好...
    99+
    2023-06-20
  • 探讨jquery轮播图不显示锚点的问题
    在开发网站和应用时,使用 jQuery 轮播图是非常常见的一项技术。然而,有时会遇到一个问题,即轮播图不显示锚点。本文将探讨这个问题的原因和解决方法。一、问题描述当使用 jQuery 轮播图插件时,我们通常希望能够在轮播图下方添加一个导航栏...
    99+
    2023-05-14
  • css锚点定位被顶部固定导航栏遮住的解决方案
    这篇文章主要介绍了css锚点定位被顶部固定导航栏遮住的解决方案,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。很多网站都有一个固定在上方的导航栏,方便用户搜索和跳转到其他页面。...
    99+
    2023-06-08
  • jquery如何模仿锚点跳转到页面指定位置
    这篇文章主要为大家展示了“jquery如何模仿锚点跳转到页面指定位置”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery如何模仿锚点跳转到页面指定位置”这...
    99+
    2024-04-02
  • web开发中页面内锚点定位及跳转方法有哪些
    这篇文章将为大家详细讲解有关web开发中页面内锚点定位及跳转方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最简单的方法是锚点用<a>标签,在href...
    99+
    2024-04-02
  • python中小数点后的位数问题
    目录python中小数点后的位数第一种方法第二种方法第三种方法python小数点位数控制利用python内置的round()函数利用格式化方法利用math模块里ceil和floor方...
    99+
    2023-03-14
    python小数点 小数点后的位数 python位数
  • 微信小程序实现锚点定位功能的方法实例
    前言 在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果:    &nbs...
    99+
    2024-04-02
  • Linux问题故障定位的知识点有哪些
    这篇文章主要讲解了“Linux问题故障定位的知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Linux问题故障定位的知识点有哪些”吧!分析问题的方法论套用5W2H方法,可以提出性能...
    99+
    2023-06-16
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作