SUI 列表 底部无限滚动

SUI 列表 底部无限滚动实现

由于APP中html页面部分采用的sui-mobile，正好历史记录页面需要底部滚动加载下一页数据。结合sui-mobile的文档自己实现如下。

html

<div class="page-group">
    <div id="page-infinite-scroll-bottom" class="page page-current" style="background-color: #f5f5f5;">
        <div class="bar" style="background-color: #ffffff;height:3.6rem; padding: 0;">
            <div class="item-line"></div>

            <div class="row" style="padding: 0 10px;">
                <div class="search-input col-40">
                    <input type="search" id="start" name="start" value="{{start}}">
                </div>
                <div class="search-input col-40">
                    <input type="search" id="end" name="end" value="{{end}}">
                </div>
                <input type="hidden" name="token" value="{{token}}">
                <button onclick="reload_card_service_list()" class="button button-primary col-20">检索</button>
            </div>

            <div class="item-line"></div>
            <div class="item-header row no-gutter">
                <div class="col-33">卡券类型</div>
                <div class="col-33">用户/手机号</div>
                <div class="col-33">核销时间</span></div>
            </div>
        </div>
        <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
        <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
            <div class="list-block">
              <ul class="list-container">

              </ul>
            </div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>
    </div>
    </div>
</div>

JavaScript

$.init()
// 是否正在加载：避免多次调用getdata引起的多次ajax请求
var loading = false;
// 上次加载的序号：处理当前请求第几页数据
var index = 1;

function addItems(item) {
    // 生成新条目的HTML
    var html = '';
    html = '<div class="item-line"></div>\
            <div class="row  no-gutter" style="background: #FFFFFF;margin-top: 3px;padding: 5px;text-align:center">\
                <div class="col-33"> '+ item['name'] + '</div>\
                <div class="col-33">' + item['user'] + '</div>\
                <div class="col-33">' + item['deal_time']+ '</div>\
            </div>';
    // 添加新条目
    $('.infinite-scroll-bottom .list-container').append(html);
}
function get_data() {
    // 如果正在加载，则退出
    if (loading) return;
    // 设置flag
    loading = true;
    var start_date = $('#start').val();
    var end_date = $('#end').val();
    // 加载过程
    $.getJSON("/mobile/api_interface_demo", {
        'index': index,
        'begin_date':start_date,
        'end_date':end_date,
        'token': '{{token}}'
    }, function (data) {
        // 重置加载flag
        loading = false;
        if (data.flag == 1) {
            if (index == 1) {
                $('.infinite-scroll-bottom .list-container').html('');
            }
            index = index + 1;

            for (var i = 0; i < data.data.length; i++) {
                var html = addItems(data.data[i]);
            }
            if (data.data.length < 20) {
                $.detachInfiniteScroll($('.infinite-scroll'));
                // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
                return;
            }
            if (data.data.length >= 20) {
                // 容器发生改变,如果是js滚动，需要刷新滚动
                $.refreshScroller();
            }
        }
    });
}
// 注册'infinite'事件处理函数
$(document).on('infinite','.infinite-scroll-bottom',get_data);

get_data();