• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > DCloud,APICloud >  mui 监听scroll下拉刷新正文

mui 监听scroll下拉刷新,避免多次刷新

作者:网页模板
类型:文章教程
点击次数:
发布时间:2018-01-12 17:38
分享到:
mui自带了下拉刷新功能,但是这个在某些情况下不好用。比如,使用了offCanvasSide侧滑菜单,而且侧滑菜单和正文在一个webview中,如果加了mui自带的pullRefresh,主体内容(就是套在<div id="pullrefresh" class="mui-content mui-scroll-wrapper"><div class="mui-scroll">里面的内容)滚动不了了。具体原因不明,总之就没有细究了,干脆自己写了:

首先,在需要刷新的主体套上mui区域滚动:
<div class="mui-content mui-scroll-wrapper">
 <div class="mui-scroll"></div>
</div>
第二步,实例化区域滚动:
mui('.mui-scroll-wrapper').scroll({
 deceleration: 0.001 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
第三步:
//下拉刷新
var refreshAble=1;
var scroll = mui('.mui-scroll-wrapper').scroll();
document.querySelector('.mui-scroll-wrapper').addEventListener('scroll', function (e){
 var scrollTop = scroll.y;
 if(scrollTop >30 && scrollTop<60){
 if(refreshAble){
 setTimeout(function(){
 pullrefresh(setRefreshAble);
 refreshAble=0;
 },500)
 }
 }
});

function setRefreshAble(){
 if(!refreshAble){
 refreshAble=1;
 }
}
这里解释下上面的代码:
1、当容器下拉的时候,判断滚动了多少,在一定区间去执行刷新事件pullrefresh,设置这个区间,是为了让刷新就在那个区间刷新,不能一直下拉,一直刷新。
2、在区间刷新还不行,会发现会刷新多次,于是设置了refreshAble,判断,当为1时,刷新,刷新完马上设置为0,这样就不会刷新了。那么什么时候再设置为1呢,pullrefresh(setRefreshAble),这里的setRefreshAble是回调函数,当pullrefresh里面的刷新方法执行完,执行setRefreshAble,它的作用是将refreshAble再设置为1,以便下次下拉仍旧会执行刷新。
3、上面的都做了还是不行,每次下拉到30-60之间就立马刷新了,而且可能会导致卡顿,不好,所以设置了500毫秒的刷新延时,虽然并不能彻底解决刷新和下拉同时进行。
4、可能有朋友会说可以监听release释放下拉的时候执行刷新,这个我试了,不好用,还要解决很多问题。
(责任编辑:网页模板)
  • 本文标签:
  • mui下拉刷新
mui组件JS API
MUI 拍照和从系统相册选择图片上传