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>
        
        <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 = '
\
            
\
                
 '+ item['name'] + '
\
                
' + item['user'] + '
\
                
' + item['deal_time']+ '
\
            
';
    // 添加新条目
    $('.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();