vue项目实现点击导航实现滑动到特定位置。

最新推荐文章于 2024-07-29 16:50:17 发布

m0_59476008

最新推荐文章于 2024-07-29 16:50:17 发布

阅读量2k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59476008/article/details/126270549

版权

这篇博客介绍了如何在Vue项目中通过不同方法实现点击导航后页面滑动到特定位置。主要方法包括：1) 使用`ref`属性结合`$refs`获取元素，适用于获取单个或组件实例；2) 创建自定义指令获取DOM元素；3) 使用`this.$el.querySelector()`或`querySelectorAll()`来获取多个相同元素并实现页面滚动效果。

摘要由CSDN通过智能技术生成

这个其实就是一个锚点的跳转，so，咋们就得获取到元素的节点。

1.首先在vue中获取节点的方法一般就几种而已，第一：通过ref方法，this,$refs.navMian来获取，即可拿到对应的元素（当需要获取多个相同的元素节点时，这个方法行不通，之后能获取到最后一个）。如果ref放在组件上，可以拿到组件实例（当组件v-for循环时，可以拿到组件的数组）。

  <div class="mianA"  ref='navMian'>
      <div></div>
      <div></div>
  </div>
 <div class="mianB"  ref='navMian'>
      <div></div>
      <div></div>
  </div>
  <el-row v-for="item in List"></el-row>

2.使用自定义指令，el就是dom元素的引用，如果不明白多看看官方文档。

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
 
// 在模板中
<template>
	<input v-model="name" v-focus />
</template>