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

前言

在开发项目时遇到了mescroll上拉加载不刷新的问题如何解决，简单记录一下自己的解决过程。

一、官网的解决方法

先理解mescroll触发上拉的原理:

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

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

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

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

1. mescroll 默认高度是100%, 所以 mescroll 的父元素需要有固定的高度 或者 直接给 mescroll 设置高度.
   您可先给 mescroll 写死高度,测试看看是否能触发上拉,如:

   
   如果写死高度能上拉,那只需 给mescroll或父元素设置高度 即可;

2. 如设置高度没有解决,那很可能 mescroll 的 overflow: auto 样式被覆盖了.
   可先给 mescroll 写死 overflow , 测试看看能否上拉, 如 :

3. 请勿给mescroll的父元素设置了overflow, 否则滚动区域就在父元素, 从而使mescroll滚动监听失效.

4. 检查一下列表是否用了 浮动 或者 定位 , 导致列表内容并没有撑开高度, 从而使mescroll滚动监听失效 (注释列表的样式排除一下).

5. 检查noMoreSize与page.size配置的值. 如果您结束上拉时,传入的当前页数据个数小于page.size时,
   mescroll会认为无更多数据, 将不再加载下一页. 详见issues236

6. 配置up的isBounce为true试试.

7. 更新mescroll的版本试试.

8. 如果运行官方案例没有问题,请仔细对比那些你认为不可能影响的地方,哪怕一行css和js

二、自己尝试的解法

如果尝试了官网所说的这些方法后仍然没有解决mescroll固定位置上拉加载数据的问题，请查看一下自己使用的是mescroll-body还是mescroll-uni，如果使用的是mescroll-body，将其更改为mescroll-uni即可解决。具体的原因是因为mescroll-body不支持局部滚动

总结

对照官网示例更改满足自己需求的组件时，应仔细阅读官网文档，别因为一个已经告诉你的点而让自己卡住很久。