SUI 实现上拉刷新，下拉加载更多通用ListView

SUI Mobile是阿里团队研发的一套h5 前端框架

SUI具有如下特点：

        1.兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。

  2.轻量级，核心文件压缩后之后52k

  3.IOS风格

公司最近有个项目，使用到了SUI开发部分的安卓移动端页面。在SUI上没有通用的上拉刷新，下拉加载更多的ListView，而且底部无线加载图标，在list中的元素个数的高度未大于屏幕高度时也会出现。自然不能拿来直接用，所以就只有自己写一个了。

不说废话代码如下：

html>



    charset="utf-8">
    http-equiv="X-UA-Compatible" content="IE=edge">
    
    name="viewport" content="initial-scale=1, maximum-scale=1">
    rel="shortcut icon" href="/favicon.ico">
    name="apple-mobile-web-app-capable" content="yes">
    name="apple-mobile-web-app-status-bar-style" content="black">

    rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    



class="page-group">
    
class="page" id="resovle_problem">
        
class="bar bar-nav">
            class="icon icon-left pull-left back def_color">
            class="icon pull-right def_color add_btn" style="font-size: 0.8rem;">新增
            
class="title">列表页面
        
        
class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" id="main_content" data-ptr-distance="55" data-distance="100">
            
            
class="pull-to-refresh-layer">
                
class="preloader">
                
class="pull-to-refresh-arrow">
            
            
            
class="card-container">
                
class="card">
                    
class="card-header">card
                    
class="card-content">
                        
class="card-content-inner">
                            这里是第1个card，下拉刷新会出现第2个card。
                        
                    
                
            
            
            
class="infinite-scroll-preloader">
                
class="preloader">
            
        
    
    
    
    

$(function() {
    'use strict';
    //下拉刷新页面
    $(document).on('refresh', '.pull-to-refresh-content', function(e) {
        // 模拟2s的加载过程
        setTimeout(function() {
            var cardNumber = $(e.target).find('.card').length + 1;
            var cardHTML = '
' +
                '
card' + cardNumber + '
' +
                '
' +
                '
' +
                '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
                '
' +
                '
' +
                '
';

            $(e.target).find('.card-container').prepend(cardHTML);
            // 加载完毕需要重置
            $.pullToRefreshDone('.pull-to-refresh-content');
            //更新数据之后 判断是否开启上拉加载
            provideInfiniteScroll();
        }, 2000);
    });

    $(document).on('click', '.add_btn', function() {
        $.modal({
            title: '弹窗',
            text: '',
            buttons: [{
                text: '取消',
                onClick: function() {
                    $.alert('You clicked first button!')
                }
            },
                {
                    text: '确认',
                    bold: true,
                    onClick: function() {
                        $.alert('You clicked third button!')
                    }
                },
            ]
        })
    });
    //下拉是否正在加载
    var loading = false;
    //模拟后台ajax请求 分页大小
    var pageSize = 6;
    //模拟后台ajax请求 页码
    var pageIndex = 1;
    $(document).on('infinite', '.infinite-scroll-bottom', function() {
        // 如果正在加载，则退出
        if(loading) return;
        // 设置flag
        loading = true;
        // 模拟1s的加载过程
        setTimeout(function() {
            // 重置加载flag
            loading = false;
            var cur_index = $('.card-container .card').length;
            // 添加新条目
            var text=""
            for(var i=0;i;i++){
                text+='
card
'
                    +'
上拉拉加载更多的'+(cur_index+i)+'card'
                    +'
'
            }
            $('.card-container').append(text)
            //容器发生改变,如果是js滚动，需要刷新滚动
            $.refreshScroller();
        }, 1000);
    });


    //移除 上拉滚动事件监听 工作
    function detachInfiniteScroll(){
        $('.infinite-scroll-preloader').hide();
        $.detachInfiniteScroll($('#main_content'))
    }
    //判断是否应该开启上拉加载
    function provideInfiniteScroll(){
        //通过当前的列表容器的高度 与 窗口的高度做比对 
        //并且要求 上拉功能之前未出现过 才会开启上拉
        var card_height = $('.card-container').attr('clientHeight');
        if(card_height >= window.innerHeight && $('.infinite-scroll-preloader').css('display')!= 'none'){
            $('.infinite-scroll-preloader').show();
            $.attachInfiniteScroll($("#main_content"))
        }else{
            $('.infinite-scroll-preloader').hide();
            detachInfiniteScroll();
        }
    }
    $.init()
    //先取消掉 下拉无线再加功能
    detachInfiniteScroll();
})