Vue滚动页面到指定位置的实现及避坑

 更新时间:2022年09月01日 15:04:31   作者:KWMax  
这篇文章主要介绍了Vue滚动页面到指定位置的实现及避坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue滚动页面到指定位置

在Vue中,有三种方式可以实现H5页面滑动至指定位置

方法1

//先获取目标位置距离
mounted() {
  this.$nextTick(() => {
     setTimeout(() => {
        let targetbox= document.getElementById('targetbox');
        this.target= targetbox.offsetTop;        
   })
  })
}
//再滑动指定距离
document.body.scrollTop = this.target;

方法2

this.$nextTick(() => {
     this.$refs.DOM.scrollTo(0,200);
})

方法3

document.getElementById("target").scrollIntoView();

避坑指南

方法1,滑动至的元素不能是display:none,存在兼容问题,亲测在部分ios机子上document.body.scrollTop滑动无效。

方法2,未亲测过,但在this.$nextTick(()里执行滑动,感觉有点麻烦。

方法3,亲测可用,ios和android都可。只是要注意,如果页面有监听scroll事件,scrollIntoView也会触发scroll事件的。

滚动页面到一定距离后固定

1.id名为testNavBar的盒子与:class=’{ fixedNavbar: isfixTab }'的盒子可以是包含关系也可以是并列关系

 <div id='testNavBar'></div>
      <div class="container "  :class='{ fixedNavbar: isfixTab  }'>
   </div>

或者

<div id='testNavBar'>
    <div :class='{ fixedNavbar: isfixTab }'>这是导航</div>
</div>

2.fixedNavbar是类名

.fixedNavbar {
      background-color: #f3f3f3;
      position: fixed;
      width: 100%;
      z-index: 2032;
      top: 0;
      left: 0;
      padding-bottom: 10px;
    }

3.isfixTab 是控制是否加类名

 data() {
    return {
      isnavshow: false,
      cateList:[],
      cateInfo:[],
      config_list:{},
      isfixTab:false
    }
  },

4.在mounted中监听页面滚动事件,并调用handleTabFix() 方法

  // 监听页面滚动
    mounted () {
        window.addEventListener('scroll', this.handleTabFix, true)
    },
    //离开当前组件前一定要清除滚动监听,否则进入其他路由会报错
    beforeRouteLeave (to, from, next) {
      window.removeEventListener('scroll', this.handleTabFix, true)
      next()
    },

5.声明一个方法handleTabFix()

 // 先分别获得id为testNavBar的元素距离顶部的距离和页面滚动的距离
        // 比较他们的大小来确定是否添加fixedNavbar样式
    handleTabFix() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#testNavBar').offsetTop
      scrollTop > offsetTop ? this.isfixTab = true : this.isfixTab = false
    }

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

相关文章

  • vue将单页面改造成多页面应用的方法

    vue将单页面改造成多页面应用的方法

    最近领导交我一个项目是使用 vue-cli 搭建的单页面应用。下面小编通过本文给大家介绍vue将单页面改造成多页面应用的方法 ,感兴趣的朋友一起看看吧
    2018-11-11
  • vue键盘事件点击事件加native操作

    vue键盘事件点击事件加native操作

    这篇文章主要介绍了vue键盘事件点击事件加native操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解

    Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解

    这篇文章主要介绍了Vue初学基础中的模板语法、数据绑定、Object.defineProperty方法等基础,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • ElementUI中的el-dropdown传入多参数的实现方法

    ElementUI中的el-dropdown传入多参数的实现方法

    本文主要介绍了ElementUI中的el-dropdown传入多参数的实现方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue数据更新UI不刷新显示的解决办法

    vue数据更新UI不刷新显示的解决办法

    这篇文章主要介绍了vue数据更新UI不刷新显示的解决办法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 你了解vue3.0响应式数据怎么实现吗

    你了解vue3.0响应式数据怎么实现吗

    这篇文章主要介绍了你了解vue3.0响应式数据怎么实现吗,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Vue通过provide inject实现组件通信

    Vue通过provide inject实现组件通信

    这篇文章主要介绍了Vue通过provide inject实现组件通信,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • vue 实现列表跳转至详情且能添加至购物车功能

    vue 实现列表跳转至详情且能添加至购物车功能

    列表页面显示数据,点击跳转到对应的详情页,详情页可以添加并跳转到购物车,购物车具有常见功能,这篇文章主要介绍了vue 实现列表跳转至详情且能添加至购物车,需要的朋友可以参考下
    2022-10-10
  • 如何在VUE中使用vue-awesome-swiper

    如何在VUE中使用vue-awesome-swiper

    这篇文章主要介绍了如何在VUE中使用vue-awesome-swiper,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • Vue自嵌套树组件使用方法详解

    Vue自嵌套树组件使用方法详解

    这篇文章主要为大家详细介绍了Vue自嵌套树组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论