SUI 列表底部无限滚动

2022-01-06 web前端

SUI 列表底部无限滚动实现

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

html

卡券类型用户/手机号核销时间

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