前言

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

一、官网的解决方法

先理解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

二、自己尝试的解法

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

总结

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

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

下拉加载实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果
[Java教程]iscroll5实现一个下拉刷新上拉加载的效果 0 2016-08-24 15:00:08 直接上代码!!! * { margin: 0; padding: 0; } ul, li { ...
iscroll5实现一个下拉刷新上拉加载的效果
直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...
better—scrolls解决下拉刷新，上拉加载更多时出现只执行一次的问题
问题在调用scrolls时出现只刷新一次的问题解决在每一次执行完加载或刷新时,上拉或者下拉,结束后,需要执行finishPullUp()或者finishPullDown(),否则将不会执行下次操 ...
Android自定义控件实战——实现仿IOS下拉刷新上拉加载 PullToRefreshLayout
下拉刷新控件,网上有很多版本,有自定义Layout布局的,也有封装控件的,各种实现方式的都有.但是很少有人告诉你具体如何实现的,今天我们就来一步步实现自己封装的 PullToRefreshLayout ...
Android RecyclerView（八）设置自定义下拉刷新与上拉加载数据
Android RecyclerView(八)设置下拉刷新与上拉加载数据 GitHub 项目源码 CSDN 博客说明智慧安卓App 文章分析下拉刷新效果上拉加载数据效果 1 xml布局文件中 ...
iOS UITableView下拉刷新上拉加载更多EGOTableViewPullRefresh类库使用初级剑侠篇（欢迎提建议和分享遇到的问题）
这篇文章说下:MJRefresh和 EGOTableViewPullRefresh 的使用方法最下面有原理说明,若有不对或者建议请评论指出,先谢谢了: 首先是英文原文和类库下载地址:https:// ...
移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法...
1.移动端上拉加载网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
better-scroll 上拉加载，下拉刷新(解决移动端长页面卡顿)
一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...
mescroll上拉加载的实现
html部分 <div id="mescroll" class="mescroll"> <ul class="recordl ...

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

前言

一、官网的解决方法

二、自己尝试的解法

总结

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

最新文章

热门文章