vue中的锚点定位问题

目录
  • vue锚点定位
    • 锚点定位与平滑滚动反定位支持
  • 锚点定位bug无效和替代方式
    • 在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事件就可以了

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

(0)

相关推荐

  • vue模态框实现动态锚点

    本文实例为大家分享了vue模态框实现动态锚点的具体代码,供大家参考,具体内容如下 参考:vue中实现锚点跳转及滚动监听的简便方法 效果图: 代码: // html代码 <template>   <div id="app">     <el-dialog         class="abow_dialog"         title="增加内容"         :visible.sync="Dialog

  • vue+element ui实现锚点定位

    本文实例为大家分享了vue + element ui 实现锚点定位的具体代码,供大家参考,具体内容如下 vue <el-row :gutter="20"> <el-col :span="3"> <!--导航选择事件--> <el-menu :default-active="activeStep" @select="jump"> <el-menu-item v-for=&qu

  • vue中如何实现锚点定位平滑滚动

    目录 vue锚点定位平滑滚动 vue点击tabs平滑滚动(锚点事件) 定义 兼容 使用 vue锚点定位平滑滚动 下面是简单的代码,拿来即用 html //给div盒子设定单击事件和ref名 <div @click="getThere" ref="cat_box">点击滑动到此位置</div> methods: {  getThere() {       // 通过ref名获取元素在页面中的位置并滚动至此       this.$el.quer

  • vue实现锚点跳转及滚动监听的方法

    vue中实现锚点跳转以及滚动监听跳转到相应标签的方法,供大家参考,具体内容如下 *注意·如果scroll-item的最后一个元素高度必须大于等于滚动区域的高度,不然最后一个元素就滚动不上去, scrollIntoView接口的具体参数说明 实际效果图 代码结构 // Html结构 <template>   <div>     <div class="list">       <ul>         <li v-for="

  • vue实现锚点定位功能

    本文实例为大家分享了vue实现锚点定位的具体代码,供大家参考,具体内容如下 这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 如果是获取浏览器的滚动高度,各个浏览器有所差异,使用以下几种方式: Chrome: document.body.scrollTop Firefox: document.documentElement.scrollTop Safari: window.pageYOffset 我这里是局部元素滚动,因此稍有差异.先附上html及css代码块: scrol

  • vue中的锚点定位问题

    目录 vue锚点定位 锚点定位与平滑滚动反定位支持 锚点定位bug无效和替代方式 在vue项目中定义一个方法不适用锚点定位 vue锚点定位 锚点定位与平滑滚动反定位支持 代码如下 html <div style="display: flex;height: 442px;">                        <el-tabs v-model="activeTabs" class="zxtabsStyle" tab-p

  • vue中锚点的三种方法

    第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { selector:to.hash } } } 组件: <template> <div> <ul class="list"> <li><a href="#1" rel="external nofollow"

  • 详解Vue项目中实现锚点定位

    背景 今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

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

  • Vue中div contenteditable 的光标定位方法

    在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console.log(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari ob

  • 在Vue中获取组件声明时的name属性方法

    在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err

  • Vue中通过vue-router实现命名视图的问题

    在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示 例如:创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了 在路由对象中 使用components属性 以使一个路径下可挂载多个子组件: 之后即可为每个要展示的组件指定一个名字 默认name为default 即 不设置名字 <script> var header={ template:"<h1>头部</h1>" } var leftBox=

  • vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    在路由配置中,设置重定向后,浏览器打开是空白没有内容,这里首先确保你的结构没有写错,然后查看单词是否拼错误,一般情况是因为单词拼写错误. 修改后,跳转成功: 附录:VUE通过后端重定向到VUE的页面后,前端路由失效的解决方案 这个问题是我在做微信授权登录的时候遇到的. 具体描述: 用户打开页面后,路由拦截判断用户是否登录,如果未登录,则将用户的访问地址记录到localStorage里面,等待授权后重定向到该页面. 当我使用location.href将页面跳转到后端地址,进行微信用户信息获取完成,

  • vue中正确使用jsx语法的姿势分享

    目录 前言 虚拟DOM 什么是虚拟DOM 虚拟DOM的优点 渲染函数是什么 jsx 在vue3中编写jsx的两种方式 用法 最后 参考 前言 又到了愉快的摸鱼时间,我觉得不能荒废,H5页面我一直用的vant,出于对源码的好奇,我从git上拉了一份vant源码,里面竟然都是jsx写的组件,于是我开始了对在vue中使用jsx的探索 虚拟DOM 什么是虚拟DOM 在这之前,先了解下虚拟DOM,vue和react框架都在内部使用了虚拟DOM,这样做的原因是通过js操作DOM的计算成本很高,虽然js更新速

随机推荐