vue数据无限滚动

完整代码中项目中使用了vuetify估div内的class会代表了对应的样式根据需要自行删减。

鼠标悬浮停止滚动鼠标离开恢复滚动在最后区别就是将scroll方法从onMounted中提取出来了。

vue3代码

templatediv

publicRecruitment-bountyDisplay})//

dom

垂直方向滚动scrollRef.value?.scrollTo({top:

top})if

0scrollRef.value?.scrollTo({top:

0})list.value

不断滚动requestAnimationFrame(scroll)}scroll()

/scriptstyle

2.如果数据长度仅高于容器高度不足一个数据单位的长度会出现抖动滚动。

解决方法将数据复制一份

删减代码!--

--divclassscroll-containerrefscrollRefstyleheight:

calc(100%

publicRecruitment-bountyDisplay})

滚动实现代码部分

垂直方向滚动scrollRef.value?.scrollTo({top:

top,})if

0scrollRef.value?.scrollTo({top:

0,})list.value

不断滚动requestAnimationFrame(scroll)}//

clientHeight

scrollRef.value?.clientHeightif

(len*dataItemHeight

如果clientHeight刚好大于len*dataItemHeight但不满足(len1)*dataItemHeight会出现抖动。

//

listSource.concat(...Array.from({

length:

--divclassscroll-containerrefscrollRefstyleheight:

calc(100%

https://minio.citupro.com/dev/menduner/7.png/v-avatardiv

classml-2{{

publicRecruitment-bountyDisplay})

{type:

[https://img0.baidu.com/it/u230622178,1565949306fm253fmtautoapp138fJPEG?w449h300,https://img0.baidu.com/it/u1401084042,2724457850fm253fmtautoapp138fJPEG?w500h726,https://img1.baidu.com/it/u3995643348,1848098846fm253fmtautoapp138fJPEG?w800h800,https://img0.baidu.com/it/u230622178,1565949306fm253fmtautoapp138fJPEG?w449h300,https://img0.baidu.com/it/u1401084042,2724457850fm253fmtautoapp138fJPEG?w500h726,https://img1.baidu.com/it/u3995643348,1848098846fm253fmtautoapp138fJPEG?w800h800,https://img0.baidu.com/it/u230622178,1565949306fm253fmtautoapp138fJPEG?w449h300,

let

垂直方向滚动scrollRef.value?.scrollTo({top:

top,})if

0scrollRef.value?.scrollTo({top:

0,})list.value

不断滚动requestAnimationFrame(scroll)}//

clientHeight

scrollRef.value?.clientHeightif

(len*dataItemHeight

如果clientHeight刚好大于len*dataItemHeight但不满足(len1)*dataItemHeight会出现抖动。

//

listSource.concat(...Array.from({

length:

--divclassscroll-containerrefscrollRefstyleheight:

calc(100%

https://minio.citupro.com/dev/menduner/7.png/v-avatardiv

classml-2{{

publicRecruitment-bountyDisplay})

{type:

[https://img0.baidu.com/it/u230622178,1565949306fm253fmtautoapp138fJPEG?w449h300,https://img0.baidu.com/it/u1401084042,2724457850fm253fmtautoapp138fJPEG?w500h726,https://q7.itc.cn/q_70/images03/20240423/6d236fae5c8f44ed9b60d977f32debb7.jpeg,https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg,https://q4.itc.cn/q_70/images03/20240528/298d4abda5e4469d98fa77e7cde46525.jpeg,https://q5.itc.cn/q_70/images03/20240520/ceb0d77d1be24eea8cd3826994eac1c1.jpeg,https://img1.baidu.com/it/u3995643348,1848098846fm253fmtautoapp138fJPEG?w800h800,

let

垂直方向滚动scrollRef.value?.scrollTo({top:

top,})if

0scrollRef.value?.scrollTo({top:

0,})list.value

requestAnimationFrame(scroll)//

setTimeout(()

cancelAnimationFrame(scrollItem.value)

//暂停滚动

scrollRef.value?.clientHeightif

(len*dataItemHeight

如果clientHeight刚好大于len*dataItemHeight但不满足(len1)*dataItemHeight会出现抖动。

//

listSource.concat(...Array.from({

length: