SUI mobile 在多标签无限滚动无法触发
许天逸
SUI mobile 在多标签无限滚动无法触发。
：首次加载的标签页，如果列表数量较少或无的话，切换其他标签页无法触发 无限滚动。
前端代码
<!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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../dist/css/sm.css">
<link rel="stylesheet" href="../dist/css/sm-extend.css">
<link rel="stylesheet" href="../assets/css/index.css">
</head>
<body>
<!--<div class="page-group">-->
<div class="page" id="page-fixed-tab-infinite-scroll">
<div class="content" data-type="">
<!-- 事务统计-->
<div class="buttons-tab">
<a href="#tab1" class="tab-link active button">1</a>
<a href="#tab2" class="tab-link button">2</a>
<a href="#tab3" class="tab-link button">3</a>
</div>
<div class="tabs">
<div id="tab1" class="tab active infinite-scroll">
<div class="list-block" style="margin-top: 0px">
<ul class="list-container">
</ul>
</div>
<!-- 加载提示符 -->
<div class="infinite-scroll-preloader">
<div class="preloader">
</div>
</div>
</div>
<div id="tab2" class="tab infinite-scroll" >
<div class="list-block" style="margin-top: 0px">
<ul class="list-container">
</ul>
</div>
<!-- 加载提示符 -->
<div class="infinite-scroll-preloader">
<div class="preloader">
</div>
</div>
</div>
<div id="tab3" class="tab infinite-scroll" >
<div class="list-block" style="margin-top: 0px">
<ul class="list-container">
</ul>
</div>
<!-- 加载提示符 -->
<div class="infinite-scroll-preloader">
<div class="preloader">
</div>
</div>
</div>
</div>
</div>
</div>
<!--</div>-->
<!--sui mobile -->
<script type="text/javascript" charset="utf-8" src="../assets/js/zepto.js"></script>
<script type="text/javascript" charset="utf-8" src="../dist/js/sm.js"></script>
<script type="text/javascript" charset="utf-8" src="../dist/js/sm-extend.js"></script>
<!-- end sui mobile-->
<script type="text/javascript" charset="utf-8" src="../../plugins/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../assets/js/config.js"></script>
<script type="text/javascript" charset="utf-8" src="../../plugins/layer/layer.js"></script>
<script type="text/javascript" charset="utf-8" src="../flow/js/flow.js"></script>
<script type="text/javascript" charset="utf-8" src="../assets/js/dingtalk.js"></script>
<script type="text/javascript" charset="utf-8" src="js/myWorks.js"></script>
</body>
</html>
/**
* 全局变量的配置
*/
var globalConfig = {
/**静态服务地址 */
staticPath: "/x/",
/**后台服务地址 */
serverPath: "/x/"
};
var serverPath = globalConfig.serverPath;
// 最多可加载的条目
var maxItems = 10000;
var tabIndex = 0;
var staffId = '';
var tabIndex = 0;
// 每次加载添加多少条目
var itemsPerLoad = 20;
$$(document).on("pageInit", "#page-fixed-tab-infinite-scroll", function(e, id, page) {
//多个标签页下的无限滚动
var loading = false;
var lastIndex = $$('.list-container li')[0] === undefined ? 0 : $$('.list-container li')[0].length;
//获取信息
Flow.formAjaxJson(serverPath + "myinfoIndex", "get",'',infoBack);
function infoBack(data) {
staffId = data.staffId;
//初始化List
getList(itemsPerLoad, lastIndex, staffId, 'important', null);
}
$$(page).on('infinite', function () {
// 如果正在加载，则退出
if (loading) return;
// 设置flag
loading = true;
if($$(this).find('.infinite-scroll.active').attr('id') === "tab1"){
tabIndex = 0;
}
if($$(this).find('.infinite-scroll.active').attr('id') === "tab2"){
tabIndex = 1;
}
if($$(this).find('.infinite-scroll.active').attr('id') === "tab3"){
tabIndex = 2;
}
lastIndex = $$('.list-container').eq(tabIndex).find('li').length;
// 模拟0.5s的加载过程
setTimeout(function() {
// 重置加载flag
loading = false;
if (lastIndex >= maxItems) {
// 加载完毕，则注销无限加载事件，以防不必要的加载:$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));多个无线滚动请自行根据自己代码逻辑判断注销时机
// 删除加载提示符
$$('.infinite-scroll-preloader').eq(tabIndex).hide();
return;
}
getList(itemsPerLoad, lastIndex, staffId, (tabIndex === 0 ? 'important' : null),
(tabIndex === 0 ? null : (tabIndex === 1 ? 'B' : 'C')));
// 更新最后加载的序号
lastIndex = $$('.list-container').eq(tabIndex).find('li').length;
$$.refreshScroller();
}, 500);
})
});
function getList(itemsPerLoad, lastIndex, staffId, affairIsKey, affairType) {
var param = {
length: itemsPerLoad,
start: lastIndex,
affairChargeUser: staffId,
affairIsKey: affairIsKey,
statStatus: GetUrlParam("statStatus"),
affairType: affairType
};
Flow.formAjaxJson(
serverPath+ "v1/affair/list",
"post",
param,
listBack,
null, null, false, null, 'application/x-www-form-urlencoded'
);
function listBack(data){
maxItems = data.recordsTotal;
addItems(data.data.length, lastIndex, data.data);
}
}
// 生成新条目的HTML
function addItems(number, lastIndex, data) {
var html = '';
for (var i = lastIndex + 1, j =0; i <= lastIndex + number; i++, j++) {
var detailUrl = serverPath + 'ding/flow/caseInfo/affairDetail.html?id=' + data[j].affairId;
html +=
'<li class="item-content">' +
'<div class="item-inner">' +
'<div class="item-title" style="width:55%">' +
'<a href=" ' + detailUrl+ '" class="external">' +
'<span>' + data[j].affairTitle + '</span>' +
'</a>' +
'</div>' +
'<span>' + data[j].affairTypeDictValue +'</span><br />' +
'</div>' +
'</li>';
}
// 添加新条目
$$('.infinite-scroll.active .list-container').append(html);
if (maxItems <= itemsPerLoad) {
$$('.infinite-scroll-preloader').eq(tabIndex).hide();
}
}
/**
* 获取浏览器地址栏参数
* @return {string}
*/
function GetUrlParam(id) {
var reg = new RegExp("(^|&)"+ id +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null) {
return unescape(r[2]);
}else {
return '';
}
}
$$.init();
类似资料：