Vue3 + Element-Plus: 移动端使用无限滚动出现自动加载的bug

最近做的这个项目有写一套移动端样式的需求,在某个页面,需要将web端的table,以及table对应的分页,在移动端用card的形式展示出来,反正最终经过几种方案的讨论,选择了用饿了么plus的无限滚动来实现。

Infinite Scroll 无限滚动

我想想在这里遇到了什么问题来着...

嗷对,在设置完所有属性后,出现了一个bug:打开页面时会自动往下加载,而非触底后再继续加载,找了半天都没找到问题的所在。

百度后说要必须加上style="overflow: auto;"这个属性,但是加上后仍然没啥反应。

后来又查到overflow-anchor: none属性可以解决无限滚动在移动端自动加载的问题,于是我又加了该属性,但是还是不生效。

 真的是折腾了我好久好久,最后无意中压了下键盘,把其中一个样式(style="overflow: auto;")删掉了,然后突然就好了...

 最终代码如下图

补充一些解释:

1、设置min-height属性的目的是,让初始无数据的时候,v-loading加载的位置靠下一点

2、设置infinite-scroll-distance属性,在浏览器的手机模式中,无限滚动是正常显示的,但是在测试环境中,在手机上打开却不生效,我猜测是在手机上没有触底,于是刚刚添加了这个属性,至于是否能够解决问题,还得看明天测试出的结果,无限滚动的其他相关属性介绍详看文档Infinite Scroll 无限滚动 | Element Plus

---------------------------------------------------------------------------------------------------------------------------------

2022.12.15补充说明

经过测试,一切正常,但是在后来因为业务场景问题我把disabled取消了。

另外就是或许你们会出现这样的问题,在浏览器或者微信电脑端打开你们测试环境的链接,无限滚动一切正常,而在手机微信打开你们测试环境的链接,会发现无限滚动失效了,那请移步去手机百度打开试试,如果百度是正常的,说明你写的没问题,问题在于微信。

经过查阅相关资料,猜测是浏览器内核问题,腾讯系列软件中集成的浏览器应该全部用的是腾讯的X5内核,在部分场景上会出现兼容性的问题,至于兼容性的解决方案我没有找到,而且后续作者本人的业务场景不是浏览器打开,所以暂时搁置。

如措辞或用词有误还望见谅。

希望本帖能够帮到你,如对你有用的话,希望能够收获大家的点赞收藏加关注哈!

猜你喜欢

转载自blog.csdn.net/weixin_44016350/article/details/128293352