当前位置: 首页 > 工具软件 > SUI Mobile > 使用案例 >

SUI mobile 在多标签无限滚动无法触发

许天逸
2023-12-01

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();
 类似资料: