mui 可以上拉加载,只要触碰,就会完成一次加载,没有正在 loading... 加载的状态

发布于 2022-09-05 10:16:03 字数 4203 浏览 14 评论 0

下拉时无状态:
下拉时,无状态

上拉时也无状态:
图片描述

且上下拉都会报这样的错误,这个错误是只要触碰就会报错。首次加载不执行拖动操作也会报一个这样的错误,我查过原因,有的说是mui传的参数有问题,可是我没有专门给mui传参数呀,不知道这个错误到底从哪来的:
图片描述

我的html结构这样的:

<body>
    <div id="biometricPage">
    <!--header-->
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left icon-color"></a>
            <h1 class="mui-title icon-color"></h1>
        </header>
        <!--content-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                 <!--数据列表-->
                <ul id="biometricList" class="mui-table-view mui-table-view-chevron js-view">
                    <li class="mui-table-view-cell"></li>
                </ul>
            </div>
        </div>
    </div>
</body>

我的JS,下面的js可以正常的加载出数据,但是加载过程中的 loading... 状态没有的且触碰页面就不停的报错的问题,没有找到原因,请各位抽空帮我看看原因,谢谢:

mui.init({
        pullRefresh: {
            container:'#pullrefresh',
            up: {
                height:50,
                contentrefresh: '正在加载...',
                contentnomore:'没有更多数据了',
                callback: pullupRefresh
            }
        }
    });
    mui('.mui-scroll-wrapper').scroll();
     
    function pullupRefresh(){
        setTimeout(function(){
            upLoad();
        },1500)
    }  
    var count = 0;
    function upLoad(){
        mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2));
            var page = 1;
            var size = 10;
            
            /*第一次加载时取得所有的li*/
            var table = jQuery('.mui-table-view');
            var cells = table.find('.mui-table-view-cell');
            var newCells = {};
            var url = MyAnviz.baseUrl + '/product/ajax/productlist.html';
            //查询参数,因为是假数据,因此这个对象没有作为查询参数使用
               var dataEntity = {
                "userId": "1",
                "page": page,
                "size": size
            };
            //刷新加载,更改page
            dataEntity.page = parseInt(dataEntity.page) + 1;
            console.log('page:' + dataEntity.page);
            
            mui.ajax({
                type: "GET",
                url: url,
                data: dataEntity,
                dataType: "json",
                success: function (data) {
                    console.log('data' + data.data);
                    
                    for (var i = 0; i < data.data.length; i++) {
                        var item = data.data[i];
                        if(item){
                            var p_id = item.contentId;
                            var p_img = item.productorImg;
                            var p_name = item.productorName;
                            var p_des = item.productorDes;
                            var p_url = item.productorUrl;
                        }
                        
                        /*新的 数组列表*/
                        var li = jQuery('<li class="mui-table-view-cell mui-media js-media" data-id="' + p_id + '">' + '<img class="mui-media-object mui-pull-left js-img" src="' + p_img + '" /><div class="mui-media-body js-media-body">' + p_name + '</div>' + '<div class="anviz-ellipsis js-des js-info">' + p_des + '</div></li>');
                        /*改变cells的length*/
                        console.log('新的li为:' + li.length);
                        
                        /*新的li数组添加到第一次加载的10条li的后面*/
                        cells.push(li[0]);
                        console.log('新的li数量' + cells.length);
                        table.append(cells);
                    }
                }
            });
    }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

黑白记忆 2022-09-12 10:16:03

发生这个问题的原因是因为:

  1. 重复加载了独立的js,只要把加载外部的js删除掉,就不会再报错了。

  2. 主要还是因为请求参数有问题,有冲突而导致的

  3. MUI里判断上拉1次是请求1次的方法来自 count

console.log('data' + data.data);
var pageCount = data.pageCount;
var pageNum = data.page;
var pageSize = Math.floor(pageCount / pageNum);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pageSize));//参数为true代表没有更多数据了。

总之,它的请求参数为:

data: {
    "userId": "1",
    "page": count,
    "size": size
}

就不会报错了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文