Q. 为什么我写的上拉触发不了 或者 列表无法滑动 ? Q. 给mescroll的父元素或mescroll设置高度的技巧 ? Q. 如何修改下拉刷新和上拉加载的文本? Q. 如何根据下拉的情况动态改变下拉刷新区域的布局 ? Q. 如何修改page.num从0开始 ? Q. 如何使用mescroll.endByPage, mescroll.endBySize, mescroll.endSuccess 中的 time参数 ? (mescroll-uni也适用) Q. 如何修复iOS下拉刷新偶尔闪白屏或抖动的情况? Q. 在iOS的微信,QQ,Safari等浏览器, 列表顶部下拉和底部上拉露出浏览器灰色背景, 如何禁止iOS橡皮筋效果下拉回弹 ? Q. 为什么position: fixed的元素写到mescroll的div里面会抖动 ? Q. 为什么在PC端或HBuilder预览mescroll案例鼠标向上拖不动列表 ? Q. mescroll.js 和 mescroll-uni 的区别 ? Q. 为什么我写的上拉触发不了 或 加载进度无法结束 ? Q. 如何重置mescroll默认样式,比如修改回到顶部按钮的bottom值 ? Q. 如何隐藏滚动条 ? Q. 为什么设置全局组件失效 ? Q. H5端如何禁止iOS橡皮筋效果下拉回弹, 如何解决android微信X5浏览器与下拉刷新的冲突 ?

敲黑板 :
如果您遇到的问题,在mescroll的案例中并未出现, 最好再认真看一下基础案例或者文档 ~
很多加我QQ反馈问题的朋友, 都没有看基础案例, 也不认真看文档, 花了许多时间, 走了许多弯路哦 ~
也许您的问题其实在基础案例一两行代码或一个参数配置就能解决啦 ~


如果以下答案未能解决您的问题, 可在GitHub提issues 或 发送邮件至 mescroll@qq.com, 最好能提供重现问题的Demo O(∩_∩)O谢谢 ~


支持付费咨询, 作者QQ 2260429223 (傍晚下班后在线), 解决问题您适当打赏即可, 金额随意~

Q. 为什么我写的上拉触发不了 或者 列表无法滑动 ?

先理解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 写死高度,测试看看是否能触发上拉,如: <div id="mescroll" class="mescroll" style="height: 400px;">
如果写死高度能上拉,那只需 给mescroll或父元素设置高度 即可;

2. 如设置高度没有解决,那很可能 mescroll 的 overflow: auto 样式被覆盖了.
可先给 mescroll 写死 overflow , 测试看看能否上拉, 如 : <div id="mescroll" class="mescroll" style="height: 400px; overflow: auto;">

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

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

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

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

7. 更新mescroll的版本试试.

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


Q. 给 mescroll 的父元素或 mescroll 设置高度的技巧 ?

方法一 ( 推荐 ) : 可参考 mescroll 的案例通过 position: fixed或absolute 来设置高度 , 简单快捷 :


	/*固定高度*/
	.mescroll{
		position: fixed;
		top: 44px;
		bottom: 0;
		height: auto;/*如设置bottom:50px,则需height:auto才能生效*/
	}
					

方法二 : 给 mescroll 的父元素设置高度. 因为mescroll的div默认height:100%, 所以当父元素有固定高度时,mescroll的div就会有高度.


方法三 : 通过css固定mescroll的div高度. 如: .mescroll{height:500px} 或 <div id="mescroll" class="mescroll" style="height: 400px;">


方法四 : 通过js固定mescroll的div高度. 如: document.getElementById("mescroll").style.height="500px";


方法五 : 使用body为滚动区域,无需设置高度. 具体请参考 body为滚动区域的案例


Q. 如何修改下拉刷新和上拉加载的文本 ?

建议参考 mescroll所有配置项 里面的代码 , 可以很清楚的知道 :
可通过配置 down 的 htmlContent 或 inited 或 inOffset 或 outOffset 或 showLoading 修改下拉刷新的文本
在1.3.7版本中, 还可通过配置 down 的 textInOffset 或 textOutOffset 或 textLoading 修改下拉刷新的文本
可通过配置 up 的 htmlNodata 或 htmlLoading 修改上拉加载的文本


Q. 如何根据下拉的情况动态改变下拉刷新区域的布局 ?

1. 在 down 的 htmlContent 中配置所有要动态显示的布局
2. 在 down 的 inited 中, 初始化所有动态显示的布局
3. 监听down的 inOffset, outOffset, onMoving回调, 控制各布局的显示隐藏状态

建议参考 mescroll所有配置项中高级案例源码


Q. 如何修改page.num从0开始 ?

mescroll 在 upCallback 中回调的 page.num 是从 1 开始的, 如果想改为从 0 开始, 可声明变量 var pageNum = page.num-1;

错误写法: page.num = page.num-1 或 page.num-- ; 这样会直接改变mescroll内部page对象的值,导致分页数据错误.


Q. 如何使用mescroll.endByPage, mescroll.endBySize, mescroll.endSuccess中的 time参数 ?

当准备上拉加载下一页的时候,如果此时后台数据库新增了几条记录,那么加载下一页的前面几条数据会和上一页的重复
您可以在翻下一页的时候,叫后台人员新增几条记录,即可重现上述问题

解决方法: 后台人员在请求列表的接口加传服务器时间的字段, 前端第一页加载成功后,给mescroll的time参数传入服务器时间,
mescroll会缓存此时间,当上拉加载第二页的时候 upCallback的page.time会有值
前端把page.time 和 page.num,page.size一起传给后台,过滤新加入的几条记录即可
( 注意: 后台过滤新加入的数据时,需考虑第一页page.time为null的情况,因为第一页无需过滤。 mescroll不自动生成时间,服务器时间需由后台接口返回 )


Q. 如何修复iOS下拉刷新偶尔闪白屏或抖动的情况?

在mescroll 1.3.8 版本中,已为您避免99%闪白屏或抖动的情况. 请检查更新~
如果您更新到 1.3.8版本仍出现闪白屏或抖动的情况, 可能您的列表过于复杂, 此时建议配置 down 的 mustToTop 为 true 来彻底修复.


Q. 在iOS的微信,QQ,Safari等浏览器, 列表顶部下拉和底部上拉露出浏览器灰色背景, 卡顿2秒 ?

原因是 iOS 自身的回弹效果导致的. 解决方法如下:

1. mescroll.min.css 和 mescroll.min.js 最少要更新到1.3.0版本

2. 配置 up 的 isBounce 为 false, 或者调用mescroll.setBounce(false), 禁止ios的回弹效果即可

特别注意: 如果你的应用是在APP上运行的,则完全没有必要去配置isBounce. 因为这个问题只存在iOS的微信,QQ,Safari等浏览器而已;

当前你的项目需在iOS的微信运行时, 才去配置 up 的 isBounce 为 false , mescroll会禁止window的touchmove事件, 从而阻止iOS的回弹效果.
此时除了 mescroll的div 可以滑动,其他的区域匀无法滑动;
如果你希望 mescroll之外的某个div可以滑动,则给这个div加入mescroll-touch的样式即可;

比如你希望顶部导航菜单 class="nav-top"的div 可接收touchmove事件, 则class="nav-top mescroll-touch"
如果添加mescroll-touch-x 则可水平滑动 ; 如果添加mescroll-touch-y 则可上下滑动

提示1: 建议在页面关闭前调用mescroll.setBounce(true), 可避免对其他页面的影响
提示2: body为滚动区域,不支持配置isBounce,所以上下拉仍会露出浏览器灰色背景,但不会卡顿2秒.
提示3: 您还有其他问题 建议看看 issues80


Q. 为什么position: fixed的元素写到mescroll的div里面会抖动?

在iOS的惯性滚动中, fixed元素在overflow:auto的div里面确实会抖动, android和PC是正常的.
这个不是mescroll的问题, 您可以写一个简单的案例测试. 解决方法只需把fixed元素写到mescroll的div外面即可.


Q. 为什么在PC端或HBuilder预览mescroll案例鼠标向上拖不动列表 ?

PC浏览器没有touch事件, 没法直接用鼠标向上拖动列表的, 得用鼠标滚轮,才符合PC端的使用习惯
PC浏览器可按"F12"键, 切换为手机预览模式即可正常拖动列表.
HBuilder边改边看模式目前只支持window,body级别的列表滑动, 暂不支持div,ul的overflow: auto列表滚动, 得用鼠标滚轮 .
以上并非mescroll框架的问题哈 ~ 不影响在移动端的正常使用.


Q. mescroll.js 和 mescroll-uni 的区别 ?

1. mescroll.js是原生js写的上拉刷新和下拉加载的js框架, 运行于android, ios 和 web浏览器, 但无法编译到小程序 (小程序不支持window和dom对象)
2. mescroll-uni是支持uni-app的上拉刷新和下拉加载vue组件, 一套代码可以编译到android, ios, web浏览器 和 小程序
3. mescroll.js的滚动是div原生overflow的滚动; mescroll-uni的是body原生的页面滚动; 两者性能都比通过js模拟滚动的iScroll和better-scroll要好;
5. mescroll-uni的滚动是scroll-view的滚动,所以mescroll.js的性能要好一点;
6. mescroll.js有图片懒加载的配置, 而mescroll-uni暂时还没有, 在开发和测试中..


Q. 为什么我写的上拉触发不了 或 加载进度无法结束 ?

1. 检查是否配置 manifest.json 的编译模式为 自定义组件模式
2. 检查 MescrollUni 是否正确引入 和 注册在 components 中
3. <mescroll-uni> 标签的 @down, @up 必须配置
4. 在 downCallback 和 upCallback 联网成功和失败的方法都需要结束mescroll的加载进度
5. mescroll-uni的滚动需要有高度, 默认:fixed="true" 通过fixed固定高度的; 如果设置为false,高度则跟随父元素,需要给父元素设置高度
6. 检查noMoreSize与page.size配置的值. 如果您结束上拉时,传入的当前页数据个数小于page.size时,
mescroll会认为无更多数据, 将不再加载下一页. 详见issues236
7. 如果运行官方案例没有问题,请仔细对比那些你认为不可能影响的地方,哪怕一行css和js (这一步很重要,很重要...)

Q. 如何重置mescroll默认样式,比如修改回到顶部按钮的bottom值 ?

HBuilderX目前修改组件的样式方法如下:
编译到小程序和app使用 !important; 比如 .mescroll-totop { bottom: 60upx !important }
编译到H5,使用穿透>>>标记; 比如 >>>.mescroll-totop { bottom: 60upx}
编译到H5,如果是scss,则用/deep/标记; 比如 /deep/.mescroll-totop { bottom: 60upx}

Q. 如何隐藏滚动条 ?

点击查看详情: http://ask.dcloud.net.cn/article/36090

Q. 为什么设置全局对象失效 ?

点击查看详情: http://ask.dcloud.net.cn/question/73950

Q. H5端如何禁止iOS橡皮筋效果下拉回弹, 如何解决android微信X5浏览器与下拉刷新的冲突 ?

普通的html在微信等web浏览器下拉时会出现灰色或黑色背景
会出现 '网页由 xxx 提供', 'QQ浏览器X5内核提供技术支持' 等字眼;
列表在底部或顶部继续上下拉时会出现灰色的遮罩, 此时需停留2秒列表才能继续滚动;

mescroll-uni 在 1.1.5 版本在 up 中新增 isBounce 的参数, 来避免上述浏览器bounce的问题. 同时解决与下拉刷新和上拉加载的冲突
mescroll-uni 默认 isBounce 为 false , 可有效禁止浏览器橡皮筋回弹效果. 此时除了 mescroll 可以滚动, 其他区域的touchmove事件均被阻止
如果你希望 mescroll之外的某个view可以滑动, 则给这个view加入mescroll-touch的样式即可;

比如你希望顶部导航菜单 class="nav-top"的view 可接收touchmove事件, 则class="nav-top mescroll-touch"
如果添加mescroll-touch-x 则可水平滑动 ; 如果添加mescroll-touch-y 则可上下滑动

另外也可以动态设置, 比如显示列表弹窗时调用 mescroll.setBounce(true) 允许滚动; 关闭弹窗时 mescroll.setBounce(false) 禁止滚动

mescroll.js交流群