【vue scrollTo 数据无限滚动 】

2024-06-21 10:44
文章标签 javascript 数据 vue 无限 frontend 滚动 scrollto

本文主要是介绍【vue scrollTo 数据无限滚动 】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue数据无限滚动
参考来源 Vue3 实现消息无限滚动的新思路 —— 林三心不学挖掘机
在这里插入图片描述
vue3代码

<template><div class="scroll-container" ref="scrollRef"><div v-for="(item, index) in list" :key="index" style="height: 40px; line-height: 40px;">{{ item.title }}</div></div>
</template><script setup>
import  { onMounted, ref } from 'vue'
defineOptions({name: 'publicRecruitment-bountyDisplay'})// 容器的 dom 节点
const scrollRef = ref()
// 模拟列表数据
const dataSource = new Array(10).fill(0).map((_, index) => ({title: `这是一条信息${index}`
}))
const list = ref([...dataSource])// 记录原始数据的长度
const len = dataSource.length
onMounted(() => {// 滚动的距离let top = 0// 索引let index = 0const scroll = () => {// 垂直方向滚动scrollRef.value?.scrollTo({top: top++})if (top % 40 === 0) {// 哪一项滚不见了，就拿这一项 push 到列表中const target = list.value[index]if (target) list.value.push(target)if (index < (len - 1)) {// 不断递增index++} else {// 刚好滚动完一轮，重新来过，初始化数据top = 0index = 0scrollRef.value?.scrollTo({top: 0})list.value = [...dataSource]}}// 不断滚动requestAnimationFrame(scroll)}scroll()
})
</script><style lang="scss" scoped>
.scroll-container {//   防止有滚动条出现overflow: hidden;height: 150px;
}
</style>

兼容升级版本
1.如果数据长度形成的总高度少于容器高度，不设置滚动
2.如果数据长度仅高于容器高度不足一个数据单位的长度会出现抖动滚动。解决方法：将数据复制一份

删减代码

在这里插入图片描述

<!-- 滚动展示 -->
<template><div style="height: 100%; width: 100%;"><div class="mb-3" style="font-size: 13px; color: #666;">无缝衔接滚动</div><!-- 滚动 --><divclass="scroll-container"ref="scrollRef"style="height: calc(100% - 32px); overflow: hidden; font-size: 13px;color: #333;"><!-- 数据list --><divv-for="(item) in list":key="item.name"class="d-flex justify-space-between align-center":style="`height: ${dataItemHeight}px;`"><div class="ml-2">{{ item.name }}</div></div></div></div>
</template><script setup>
import  { onMounted, ref } from 'vue'
defineOptions({name: 'publicRecruitment-bountyDisplay'})
// 滚动实现代码部分
const dataItemHeight = 40
// 容器的 dom 节点
const scrollRef = ref()
// // 模拟列表数据
let listSource = new Array(10).fill(0).map((_, index) => ({ name: `name${index}`}))
const list = ref([...listSource])// 记录原始数据的长度
let len = listSource.length
onMounted(() => {// 滚动的距离let top = 0// 索引let index = 0const scroll = () => {// 垂直方向滚动scrollRef.value?.scrollTo({top: top++,})if (top % dataItemHeight === 0) {// 哪一项滚不见了，就拿这一项 push 到列表中const target = list.value[index]if (target) list.value.push(target)if (index < len - 1) {// 不断递增index++} else {// 刚好滚动完一轮，重新来过，初始化数据top = 0index = 0scrollRef.value?.scrollTo({top: 0,})list.value = [...listSource]}}// 不断滚动requestAnimationFrame(scroll)}// 如果数据长度形成的总高度少于容器高度，不设置滚动const clientHeight = scrollRef.value?.clientHeightif (len*dataItemHeight > clientHeight) {if ((len - 1)*dataItemHeight < clientHeight) {// 如果clientHeight刚好大于len*dataItemHeight，但不满足(len+1)*dataItemHeight会出现抖动。// 解决方法：将数据复制一份listSource = listSource.concat(...Array.from({ length: 1 }, () => [...listSource]))list.value = listSourcelen = listSource.length}scroll()}
})
</script>
<style lang="scss" scoped>
.red {color: red;
}
.ellipsisText {// width: 120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
</style>
完整代码

在这里插入图片描述

<!-- 滚动展示 -->
<template><div style="height: 100%; width: 100%;"><div class="mb-3" style="font-size: 13px; color: #666;">最近30天已有<span class="red">68人</span>提现成功，累计提现<span class="red">￥9450</span></div><!-- 滚动 --><divclass="scroll-container"ref="scrollRef"style="height: calc(100% - 32px); overflow: hidden; font-size: 13px;color: #333;"><!-- 数据list --><divv-for="(item) in list":key="item[keyText] || item.name"class="d-flex justify-space-between align-center":style="`height: ${dataItemHeight}px;`"><!-- 头像、用户名 --><div class="d-flex align-center"><v-avatar size="30" :image="item.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar><div class="ml-2">{{ formatName(item.name) }}</div><!-- <div class="ml-2">{{ item.name }}</div> --></div><div class="d-flex" style="width: calc(100% - 65px);"><!-- 内容 --><div class="d-flex ellipsisText mx-4" style="flex: 1;"><div>推荐到</div><div class="ellipsisText ml-1" style="max-width: 100px;">{{ item.company }}</div><div class="ellipsisText ml-1" style="max-width: 60px;">{{ item.job }}</div></div><!-- 赏金 --><div>提现￥<span class="red">{{ item.money }}</span></div></div></div></div></div>
</template><script setup>
import  { onMounted, ref } from 'vue'defineOptions({name: 'publicRecruitment-bountyDisplay'})
defineProps({keyText: {type: String,default: 'id'}
})
const avatarList = ['https://img0.baidu.com/it/u=230622178,1565949306&fm=253&fmt=auto&app=138&f=JPEG?w=449&h=300','https://img0.baidu.com/it/u=1401084042,2724457850&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=726','https://img1.baidu.com/it/u=3995643348,1848098846&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800','https://img0.baidu.com/it/u=230622178,1565949306&fm=253&fmt=auto&app=138&f=JPEG?w=449&h=300','https://img0.baidu.com/it/u=1401084042,2724457850&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=726','https://img1.baidu.com/it/u=3995643348,1848098846&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800','https://img0.baidu.com/it/u=230622178,1565949306&fm=253&fmt=auto&app=138&f=JPEG?w=449&h=300',
]
let listSource = []
for (let index = 0; index < 68; index++) {const obj = {id: 'id' + (index+1),name: '用户' + (index+1),// name: (index+1),avatar: avatarList[index % 7],company: '某某公司' + (index+1),job: '某某职位' + (index+1),money: index*index*(100 - index) || 100,}listSource.push(obj)
}// 用户名加*号
const formatName = (name) => {if (!name.length) {return name} else if (name.length === 1) {  return name // 如果名字只有一个字，则直接返回该字  } else if (name.length === 2) {  return name.charAt(0) + '*' // 如果名字有两个字，则返回第一个字后跟一个星号  } else {  return name.charAt(0) + '**' // 如果名字有多于两个字，则返回第一个字后跟两个星号  }  
}// 滚动实现代码部分
const dataItemHeight = 40
// 容器的 dom 节点
const scrollRef = ref()
// // 模拟列表数据
// const listSource = new Array(10).fill(0).map((_, index) => ({ title: `这是一条信息${index}`}))
const list = ref([...listSource])// 记录原始数据的长度
let len = listSource.length
onMounted(() => {// 滚动的距离let top = 0// 索引let index = 0const scroll = () => {// 垂直方向滚动scrollRef.value?.scrollTo({top: top++,})if (top % dataItemHeight === 0) {// 哪一项滚不见了，就拿这一项 push 到列表中const target = list.value[index]if (target) list.value.push(target)if (index < len - 1) {// 不断递增index++} else {// 刚好滚动完一轮，重新来过，初始化数据top = 0index = 0scrollRef.value?.scrollTo({top: 0,})list.value = [...listSource]}}// 不断滚动requestAnimationFrame(scroll)}// 如果数据长度形成的总高度少于容器高度，不设置滚动const clientHeight = scrollRef.value?.clientHeightif (len*dataItemHeight > clientHeight) {if ((len - 1)*dataItemHeight < clientHeight) {// 如果clientHeight刚好大于len*dataItemHeight，但不满足(len+1)*dataItemHeight会出现抖动。// 解决方法：将数据复制一份listSource = listSource.concat(...Array.from({ length: 1 }, () => [...listSource]))list.value = listSourcelen = listSource.length}scroll()}
})
</script>
<style lang="scss" scoped>
.red {color: red;
}
.ellipsisText {// width: 120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
</style>

这篇关于【vue scrollTo 数据无限滚动 】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1081001。

相关文章

MyBatisPlus如何优化千万级数据的CRUD

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查
阅读更多...
python实现对数据公钥加密与私钥解密

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分，使用python生成公钥与私钥，然后保存在两个文
阅读更多...
mysql中的数据目录用法及说明

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》：本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后，在安装目录下会有一个data目录，我们创建的数据库、创建的表、插入的
阅读更多...
Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》：本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面，查看左下角从左
阅读更多...
SpringBoot中4种数据水平分片策略

SpringBoot中4种数据水平分片策略

《SpringBoot中4种数据水平分片策略》数据水平分片作为一种水平扩展策略,通过将数据分散到多个物理节点上,有效解决了存储容量和性能瓶颈问题,下面小编就来和大家分享4种数据分片策略吧... 目录一、前言二、哈希分片2.1 原理2.2 SpringBoot实现2.3 优缺点分析2.4 适用场景三、范围分片
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
Redis分片集群、数据读写规则问题小结

Redis分片集群、数据读写规则问题小结

《Redis分片集群、数据读写规则问题小结》本文介绍了Redis分片集群的原理,通过数据分片和哈希槽机制解决单机内存限制与写瓶颈问题,实现分布式存储和高并发处理,但存在通信开销大、维护复杂及对事务支持... 目录一、分片集群解android决的问题二、分片集群图解 分片集群特征如何解决的上述问题？（与哨兵模
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2