解决mescroll固定位置上拉加载无效果？真的只需一步

KAGHQ

已于 2023-02-22 09:50:47 修改

阅读量739

点赞数

分类专栏：常用网站文章标签： javascript 前端 css

于 2023-02-22 09:49:58 首次发布

原文链接：https://blog.csdn.net/weixin_44995391/article/details/124301088

版权

常用网站专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章介绍了在uni版本的mescroll中遇到的滚动问题及官方提供的解决方案。关键点包括确保mescroll或其父元素有固定高度，检查overflow样式，防止列表样式影响高度计算，以及正确配置上拉加载的相关参数。同时，建议检查代码中的bounce设置和更新mescroll到最新版本以解决问题。

摘要由CSDN通过智能技术生成

uni版本的mescroll

一、官网的解决方法

mescroll 是 div 原生的 overflow: auto 滚动. 与 iScroll和better-scroll通过js模拟列表滚动不同, mescroll的性能更优,兼容性更好.

我们知道: 当一个div的内容超过这个div设置的高度时, 就会出现滚动条.

此时上下滑动即可触发div的onScroll事件, 从而能够监听列表如果滚动到了底部即可触发上拉加载.

所以如果div没有设置的高度, div里面的内容再多,也无法溢出这个div, 那么overflow:auto的效果就没有了.

mescroll 默认高度是100%, 所以 mescroll 的父元素需要有固定的高度或者直接给 mescroll 设置高度.
您可先给 mescroll 写死高度,测试看看是否能触发上拉,如:
如果写死高度能上拉,那只需给mescroll或父元素设置高度即可;
如设置高度没有解决,那很可能 mescroll 的 overflow: auto 样式被覆盖了.
可先给 mescroll 写死 overflow , 测试看看能否上拉, 如 :
请勿给mescroll的父元素设置了overflow, 否则滚动区域就在父元素, 从而使mescroll滚动监听失效.
检查一下列表是否用了浮动或者定位 , 导致列表内容并没有撑开高度, 从而使mescroll滚动监听失效 (注释列表的样式排除一下).
检查noMoreSize与page.size配置的值. 如果您结束上拉时,传入的当前页数据个数小于page.size时,mescroll会认为无更多数据, 将不再加载下一页. 详见issues236
配置up的isBounce为true试试.
更新mescroll的版本试试.
如果运行官方案例没有问题,请仔细对比那些你认为不可能影响的地方,哪怕一行css和js