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

最新推荐文章于 2020-06-15 10:15:22 发布

原创最新推荐文章于 2020-06-15 10:15:22 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ListView #下拉更新 #SUI #上拉加载更多 #H5

SUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用SUI Mobile前端框架实现列表页面的上拉加载更多与下拉刷新功能，并提供了一个具体的代码示例。

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

SUI具有如下特点：

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

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

3.IOS风格

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

不说废话代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>通用列表页面</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
        .def_color {
            color: #3d4145;
        }
    </style>
</head>

<body>
<div class="page-group">
    <div class="page" id="resovle_problem">
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left back def_color"></a>
            <a class="icon pull-right def_color add_btn" style="font-size: 0.8rem;">新增</a>
            <h1 class="title">列表页面</h1>
        </header>
        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" id="main_content" data-ptr-distance="55" data-distance="100">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>
            <!-- 下面是正文 -->
            <div class="card-container">
                <div class="card">
                    <div class="card-header">card</div>
                    <div class="card-content">
                        <div class="card-content-inner">
                            这里是第1个card，下拉刷新会出现第2个card。
                        </div>
                    </div>
                </div>
            </div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
</div>
</body>

</html>

$(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 = '<div class="card">' +
                '<div class="card-header">card' + cardNumber + '</div>' +
                '<div class="card-content">' +
                '<div class="card-content-inner">' +
                '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
                '</div>' +
                '</div>' +
                '</div>';

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

    $(document).on('click', '.add_btn', function() {
        $.modal({
            title: '弹窗',
            text: '<textarea style=" width:100%;"></textarea>',
            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<pageSize;i++){
                text+='<div class="card"><div class="card-header">card</div><div class="card-content">'
                    +'<div class="card-content-inner">上拉拉加载更多的'+(cur_index+i)+'card'
                    +'</div></div></div>'
            }
            $('.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();
})