vue设置页面滚动,vue实现无限滚动
本文主要介绍如何使用Vue3实现列表的虚拟滚动效果。本文中的示例代码解释得很详细，对我们的学习或工作有一定的价值。有需要的可以参考一下。
目录
前言完成效果vue3 setup使用组件编写的组件的思路和需要解决的问题
前言
最近在一个web播放器项目中，使用了很多需要显示的歌曲列表。
一个歌单有几千首歌，页面元素太多，导致chrome过载直接崩溃。
于是无限滚动列表被提上日程。
写的有点乱，也是第一次用typescript写项目。先录下来吧。
完成效果
思路和需要解决的问题
与懒加载不同，虚拟滚动需要一次性获取所有数据，但只显示屏幕可见范围内的数据。
为此，我需要知道：
一行的高度可在屏幕范围内显示的行列表位于从网页顶部开始的页面上。滚动条高度假设全屏可以容纳10条数据。要加载的数据是一个数组listData，只有数据区域listData.slice(0，10)需要裁剪。
当滚动条向下时，可以通过计算滚动条的高度/一行的高度来计算当前的行数。
要模拟滚动条的高度，您应该在页面挂载时手动设置页面的高度。一行的高度是* listdata.length。
最后，最重要的是保持列表在当前位置，手动设置列表容器的padding-top等于当前滚动条高度。
还有一个问题没有解决，就是每次来回滚动都要提出新的请求。
vue3+setup 写的组件
脚本语言设置
从“vue”导入{ ref，computed，nextTick，reactive，watchEffect，onUnmounted }
const props=defineProps{
列表数据：数组
}()
//列出HTMLElementDom
const ulRef=refany(null)
//屏幕高度
const screenH=document . documentelement . client height
const data=reactiveany({
//列表中第一项的高度(起始高度)
initH: 0，
//线条的高度
单位：0，
//屏幕范围内内部显示的数量
显示计数：1，
//列表起始值
startIdx: 0
})
const listData=computed(()={
let endIdx=data . startidx data . display count
if(endIdx=props . list data . length)endIdx=props . list data . length
返回props . list data . slice(data . startidx，endIdx)。map((v，k)={
v.idx=data.startIdx k 1
返回v
})
})
函数scrollHandler() {
//当前滚动高度
const curscroll top=document . document element . scroll top
if (curScrollTop data.initH) {
const add count=math . floor((curscroll top-data . inith)/data . unith)
ulref . value . style . set property( padding-top ，` ${addCount * data.unitH}px `)
data.startIdx=addCount
}否则{
ul ref . value . style . set property( padding-top ， 0px )
data.startIdx=0
}
}
watchEffect(()={
if (props.listData.length 0) {
nextTick(()={
//距离列表顶部的距离
data . inith=ulref . value . getboundingclientrect()。top document . document element . scroll top
//计算每行的高度
data . unith=ulref . value . children[0]。偏高
//计算屏幕上可以显示的行数
data . display count=math . ceil(screenH/data . unith)
//设置列表的总高度=一行的高度*行数。
const listH=data . unith * props . list data . length
ulref . value . style . set property( height ，` ${listH}px `)
window . removeeventlistener( scroll ，scrollHandler)
window . addevent listener( scroll ，scrollHandler)
})
}
})
未安装(()={
window . removeeventlistener( scroll ，scrollHandler)
})
/脚本
模板
ul ref=ulRef
li v-for=(listItem，listIndex)in list data :key= ` list-$ { listIndex } ` :data-idx= listItem . idx
slot :listItem=listItem/slot
/李
/ul
/模板
使用组件
脚本语言设置
从导入InfiniteList。/InfiniteList.vue
Const songs=[] //列表数据
/脚本
模板
无限列表：listData=songs
template # default=“{ listItem }”
div{{ listItem.title }}/div
！-.-
/模板
/无限列表
/模板
这就是这篇关于基于Vue3的列表虚拟滚动效果的文章。更多相关Vue列表虚拟滚动内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。