vue中的锚点定位问题

 更新时间:2022年09月16日 10:30:36   作者:女程序媛的修炼笔记  
这篇文章主要介绍了vue中的锚点定位问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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事件就可以了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-cli随机生成port源码的方法

    vue-cli随机生成port源码的方法

    这篇文章主要介绍了vue-cli随机生成port源码的方法,文中给大家介绍了vue 随机色生成方法,需要的朋友可以参考下
    2019-09-09
  • 使用vue封装一个自定义样式的滚动条

    使用vue封装一个自定义样式的滚动条

    众所周知,当容器高度固定而内容部分高度超出容器高度时,浏览器会渲染出一个可以滚动并用于显示剩余界面的条 -- 滚动条,它可以简单的样式修改,但是位置是固定的,无法移动,而我们需要改变位置的时候,它就不能满足我们的需求了,这时我们可以自己手写一个
    2023-10-10
  • VUEX 使用 mutations的两种方式

    VUEX 使用 mutations的两种方式

    这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations,在mutations中定义一个方法,这个方法就是把点击的index(也就是每个列表的唯一标识),传给state中的当前标识,需要的朋友可以参考下
    2023-01-01
  • 基于element日历组件实现签卡记录

    基于element日历组件实现签卡记录

    这篇文章主要为大家详细介绍了基于element日历组件实现签卡记录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue 中的keep-alive实例代码

    vue 中的keep-alive实例代码

    这篇文章主要介绍了vue中的keep-alive实例代码,vue实现组件信息缓存的方法,在文中也给大家提到,需要的朋友可以参考下
    2018-07-07
  • vue配置nprogress实现页面顶部进度条

    vue配置nprogress实现页面顶部进度条

    这篇文章主要为大家详细介绍了vue配置nprogress实现页面顶部进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Element plus中el-input框回车触发页面刷新问题以及解决办法

    Element plus中el-input框回车触发页面刷新问题以及解决办法

    在el-form表单组件中el-input组件输入内容后按下Enter键刷新了整个页面,下面这篇文章主要给大家介绍了关于Element plus中el-input框回车触发页面刷新问题以及解决办法,需要的朋友可以参考下
    2024-03-03
  • VUE + OPENLAYERS实现实时定位功能

    VUE + OPENLAYERS实现实时定位功能

    本系列文章介绍一个简单的实时定位示例,基于VUE + OPENLAYERS实现实时定位功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-09-09
  • element tree树形组件回显数据问题解决

    element tree树形组件回显数据问题解决

    本文主要介绍了element tree树形组件回显数据问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue对象赋值视图不更新问题及解决方法

    Vue对象赋值视图不更新问题及解决方法

    这篇文章主要介绍了Vue对象赋值视图不更新问题及解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06

最新评论