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();