vue项目点击导航滑动到相应的位置

利用scrollIntoView()方法，该方法将调用它的元素滚动到浏览器窗口的可见区域
注：此方法在页面可滚动时才有用

methods:{go(){document.getElementById("show").scrollIntoView({ behavior: 'smooth' });}}

scrollInteView方法的参数配置如下：

案例：

<template><div class="container"><div class="nav"><ul><liv-for="(item, index) in state.navData":key="item"@click="go(index)">{{ item }}</li></ul></div><div class="content"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></div>
</template>
<script setup>
import { reactive } from "vue";
const state = reactive({navData: [1, 2, 3, 4],
});
const go = (index) => {var items = document.querySelectorAll(".item");//缓慢移动至目标位置items[index].scrollIntoView({ behavior: "smooth" });
};
</script>

效果：

vue项目点击导航滑动到相应的位置相关推荐

Vue 实现导航栏滑到顶部固定，滑动到相应位置导航栏有相应选中效果，点击导航跳转到对应位置
主要思路导航栏固定判断页面卷曲是否大于导航栏的offsetTop的值,超过了就证明导航栏到达了顶部,给导航栏添加固定样式的类名,注意:需要拿到导航栏固定前的offsetTop值,固定后的offse ...
Vue项目点击刷新页面的三种方式
Vue项目点击刷新页面的三种方式一.原生js刷新方式: location.reload(); 二.Vue框架自带的路由跳转方式: this.$router.go(0); 三.在App.vue页面声明 ...
Vue 点击导航栏滑动到指定位置
效果图: assignBlock.gif 方法1: <template><div class="hold">&l ...
vue中点击导航栏部分，页面切换
写页面的时候都会用到一些导航栏.点击不同的部分切换不同的页面.并且点击的时候更换颜色代码自己简单的写一下:(vue) <nav> <ul><li v-for=" ...
vue项目点击左侧子菜单，打开一个新的浏览器标签页
在项目开发中,产品给了这样一个需求:点击左侧子菜单,在浏览器中打开一个新的标签页,展示数据大屏.在此写个随笔记录下实现过程. 思路:使用编程式导航实现页面跳转,我们常用的是 $router.push ...
vue 点击获取鼠标坐标（鼠标位置）
<button @click="getMouseXY($event)">点击获取鼠标坐标</button> getMouseXY(e){this.x = e ...
vue 点击切换导航标签，并左右滚动
vue做的导航栏,左右各有按钮,点击向左右滚动 vue做的导航栏,左右各有按钮,点击向左右滚动 Vue - 点击导航栏当前标签后变色功能(导航栏当前hover样式) Vue - 点击导航栏当前标签后变 ...
vue导航栏滑动切换居中，导航栏超出部分可以滑动，点击触发滑动对应的index，且滑动时导航栏会自动对应
效果图模仿婚礼纪电子请帖模块导航栏超出部分可以滑动,点击触发滑动对应的index,且滑动时导航栏会自动对应 Html部分 <template><div class=" ...
vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）
<view v-show="totalListArr.length>1" class="comp-tabs&qu ...

vue项目点击导航滑动到相应的位置

vue项目点击导航滑动到相应的位置相关推荐

最新文章

热门文章