vue列表如何自动滚动到制定位置

 更新时间:2023年10月09日 08:58:30   作者:王博wangbo  
这篇文章主要介绍了vue列表如何自动滚动到制定位置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

背景

业务开发中遇到一个需求,是要求跳转到新页面,并默认选中内容,如果内容在列表的位置靠后,就需要滚动到可见范围内。

实现

1. 循环实现列表,为每个item添加id,**:id="'item' + index"**,方便后续查找对应项 

<div v-for="(item,index) in dataList" :id="'item' + index" :key="index" class="item">
   <span>item: {{ item.name }}</span>
</div>

2. 待列表加载完后,执行滚动事件

// count 默认选中内容的序号
document.getElementById('item' + count).scrollIntoView()

知识点

1. scrollIntoView:Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

2. 未避免事件执行失败,一定要在页面加载完成才能触发事件,

推荐2种方式

  • 2.1 在mounted事件中触发   
  • 2.2 在执行事件时,用this.$nextTick保证页面加载完成
 this.$nextTick(() => {
    document.getElementById('item' + count).scrollIntoView()
 })

代码

以下是一个小demo,可直接执行

<template>
  <div class="white-body-view">
    <div class="content-view">
      <div v-for="(item,index) in dataList" :id="'item' + index" :key="index" class="item">
        <span>item: {{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [
        {
          name: '1'
        },
        {
          name: '2'
        },
        {
          name: '3'
        },
        {
          name: '4'
        },
        {
          name: '5'
        },
        {
          name: '6'
        },
        {
          name: '7'
        },
        {
          name: '8'
        },
        {
          name: '9'
        },
        {
          name: '10'
        },
        {
          name: '11'
        },
        {
          name: '12'
        }
      ]
    }
  },
  mounted() {
    document.getElementById('item5').scrollIntoView()
  }
}
</script>
<style lang="scss">
.content-view {
  height: 200px;
  width: 200px;
  overflow: auto;
}
.item {
  line-height: 40px;
}
</style>

总结

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

相关文章

  • vue实现简易选项卡功能

    vue实现简易选项卡功能

    这篇文章主要为大家详细介绍了vue实现简易选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 如何查看vue项目的node版本

    如何查看vue项目的node版本

    文章总结:查看Vue项目中使用的Node版本,特别是当项目使用Yarn和TypeScript时,可以通过查看yarn.lock文件中的@types/node@version来确定版本
    2025-01-01
  • VUE element-ui 写个复用Table组件的示例代码

    VUE element-ui 写个复用Table组件的示例代码

    本篇文章主要介绍了VUE element-ui 写个复用Table组件的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue3中的对象时为proxy对象如何获取值(两种方式)

    vue3中的对象时为proxy对象如何获取值(两种方式)

    使用vue3.0时,因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy<BR>对象,Proxy对象里边的[[Target]]才是真实的对象,那么如何获取这个值呢,下面下面给大家介绍两种方式,感兴趣的朋友一起看看吧
    2023-01-01
  • Vue3超详细的ref()用法教程(看这一篇就够了!)

    Vue3超详细的ref()用法教程(看这一篇就够了!)

    这篇文章主要给大家介绍了关于Vue3超详细的ref()用法的相关资料,在Vue3中ref函数不仅可以用于在组件中获取DOM元素或子组件的引用,还可以直接访问组件元素本身,需要的朋友可以参考下
    2023-07-07
  • this.$router.push携带参数跳转页面的实现代码

    this.$router.push携带参数跳转页面的实现代码

    这篇文章主要介绍了this.$router.push携带参数跳转页面,this.$router.push进行页面跳转时,携带参数有params和query两种方式,本文结合实例代码给大家详细讲解,需要的朋友可以参考下
    2023-04-04
  • Vue3 <script setup lang=“ts“> 的基本使用

    Vue3 <script setup lang=“ts“> 的基本使用

    <script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖,本文主要讲解<script setup> 与 TypeScript 的基本使用,感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • vue2.0实现音乐/视频播放进度条组件

    vue2.0实现音乐/视频播放进度条组件

    这篇文章主要为大家详细介绍了vue2.0实现音乐和视频播放进度条组件的思路及具体实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • vue路由组件路径如何用变量形式动态引入

    vue路由组件路径如何用变量形式动态引入

    这篇文章主要介绍了vue路由组件路径如何用变量形式动态引入问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 基于express中路由规则及获取请求参数的方法

    基于express中路由规则及获取请求参数的方法

    下面小编就为大家分享一篇基于express中路由规则及获取请求参数的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论