• 保存到桌面  加入收藏  设为首页
混合APP框架

MUI-区域滚动-上拉滚动-卡顿-未到顶部-未到底部触发刷新-页面出现空白-重置控件

时间:2018-05-31 12:51:50   作者:江节胜   来源:胜行天下网   阅读:1028   评论:0
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)

-pullrefresh_with_tab》


有任何疑问或技术合作都可联系我

微信:767000122 【推荐】

QQ:596957738


相关评论

加我微信 596957738 (QQ同号)加我微信   QQ联系:596957738   地址:江苏省南京市雨花台区

苏公网安备32011402010305号

皖ICP备16019989号

江节胜的Gitee,江节胜的Git地址