|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
/**
* 上拉加载实现
*/
function pullupRefresh() {
//处理轻微上拉或者下拉（未到顶部或未到底部）就开始触发刷新函数
//判断已经滚动到底部:
var _scrollId = mui('#pullrefresh');
var _scrollY =_scrollId.scroll().y;
var _maxScrollY = _scrollId.scroll().maxScrollY;
//都是负值不好计算 （这里是未到底部的判断）
_scrollY = Math.abs(_scrollY);
_maxScrollY = Math.abs(_maxScrollY);
console.log("scroll().y=="+_scrollY)
console.log("mui('pullrefresh').scroll().maxScrollY=="+_scrollY);
//_isRequesting 用来标记 ajax 开始和结束
if(_scrollY <=( _maxScrollY-100) || _isRequesting == true){
//==的话才真正触底
console.log("认为未到底部 或 正在请求中 ")
_scrollId.pullRefresh().endPullupToRefresh(false);
//还是加上一条 避免程序错误逻辑导致这里不能刷新
return;
}
console.log("认为已到底部");
mui('#pullrefresh1').pullRefresh().endPullupToRefresh(true);
//参数为true代表没有更多数据了。
if(hasMoreData== false) {
//api request here
}
}
1、从列表滚动页面输入关键字搜索时，偶尔页面出现空白
在oninput监听触发时执行
mui('#pullrefresh').pullRefresh().refresh(true); //重置
mui('#pullrefresh').scroll().scrollTo(0,0);
2、补充：判断已经滚动到底部:(均未测试)
a> document.getElementById('scroll1').addEventListener('scroll', function(e) {
alert();
});
id scroll1 和class mui-scroll-wrapper是一个dom
b> document.getElementById('scroll1').addEventListener('scrollend', function(e) {
if(e.detail.y<=e.detail.maxScrollY){
//滚动到底部
}
if(e.detail.y>=0){
//滚动到顶部
}
});
3、本文未就卡顿做特殊处理，只是从ajax时机上做了优化，从dom层面的优化，
可参考《H5-html-Fragment-碎片化加载-提升流畅度-来自MUI框架demo(HelloMui)
|
有任何疑问或技术合作都可联系我
微信：yanfahezuo 【推荐】
QQ：596957738
加我微信
