Hubilder的坑怎么解決

發(fā)布時間：2022-10-18 16:16:07 來源：億速云閱讀：136 作者：iii 欄目：編程語言

這篇文章主要講解了“Hubilder的坑怎么解決”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Hubilder的坑怎么解決”吧！

Hubilder的那些坑

第一坑:下拉/上拉刷新

今天更新了huilder版本,撿到等新內(nèi)容里面新增新建html,單webview下拉刷新示例

因為我之前的項目中也用到了上拉/下拉刷新,出了一個bug,就是在android上一點問題都沒有,但在ios上卻始終不顯示數(shù)據(jù),

所以就想著試試這個版本,

于是我就用hbuilder新建了一個下拉刷新的模版,如下;

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.min.css">
        <style type="text/css">.mui-content>.mui-table-view:first-child {
                margin-top:1px;
            }</style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h2 id="title" class="mui-title">下拉刷新和上來加載 單webview模式</h2>
        </header>
        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content">
            <!--數(shù)據(jù)列表-->
            <ul class="mui-table-view mui-table-view-chevron"></ul>
        </div>
        <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script>'#pullrefresh',
                    down: {
                        style:'circle',
                        callback: pulldownRefresh
                    },
                    up: {
                        auto:true,
                        contentrefresh: '正在加載...',
                        callback: pullupRefresh
                    }
                }
            });

            var count = 0;
            function pullupRefresh()
                setTimeout(function()
                    mui('#pullrefresh').pullRefresh().endPullup((++count > 2)); //參數(shù)為true代表沒有更多數(shù)據(jù)了。
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');
                    var newCount = cells.length>0?5:20;//首次加載20條，滿屏
                    for (var i = cells.length, len = i + newCount; i < len; i++) {
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                        table.appendChild(li);
                    }
                }, 1500);
            }

            function addData()
                var table = document.body.querySelector('.mui-table-view');
                var cells = document.body.querySelectorAll('.mui-table-view-cell');
                for(var i = cells.length, len = i + 5; i < len; i++) {
                    var li = document.createElement('li');
                    li.className = 'mui-table-view-cell';
                    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                    //下拉刷新，新紀(jì)錄插到最前面；
                    table.insertBefore(li, table.firstChild);
                }
            }
            /**
             * 下拉刷新具體業(yè)務(wù)實現(xiàn)
             */
            function pulldownRefresh()
                setTimeout(function()
                    addData();
                    mui('#pullrefresh').pullRefresh().endPulldown();
                    mui.toast("為你推薦了5篇文章");
                }, 1500);
            }

        </script>
    </body>

</html>

運行測試,完美,毫無問題!

但是當(dāng)我把這個頁面原封不懂拷到我之前的項目時,死活報錯:

mui('#pullrefresh').pullRefresh().endPullup((++count > 2)); //參數(shù)為true代表沒有更多數(shù)據(jù)了。

就是這句代碼,搞得我很崩潰,

后來終于發(fā)現(xiàn):原來是新建的html會自動生成js css兩個文件,里面包含了mui.js和,mui.css.

而我的之前的項目由于是更新之前的時候新建項目產(chǎn)生的 js和css兩個文件,所以說:

升級前后兩個版本的 js ,css文件頁升級了,只是我沒更新我項目的 js和css文件,所以才出現(xiàn)這種bug,

想想之前,ios版本的下拉刷新出現(xiàn)的bug也不難理解了.

解決辦法: 把新版本產(chǎn)生的js,css文件覆蓋掉舊版本的即可.

…….過分!!!

第二坑:onclick事件的bug

在li標(biāo)簽中使用onclick事件在ios中無反應(yīng)

改用 on 事件添加:

mui("#pullrefresh").on('tap', 'li', function()

                var value = h(this).find("a").val();

                var begindate = "" + value + "01";
                var enddate = "" + value + "31";

                mui.openWindow({
                    url: '../sales-search-list.html',
                    extras: {
                        "startdate": begindate,
                        "enddate": enddate,
                    },
                });


            });

感謝各位的閱讀，以上就是“Hubilder的坑怎么解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Hubilder的坑怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

Hubilder的坑怎么解決

Hubilder的那些坑

第一坑:下拉/上拉 刷新

第二坑:onclick事件的bug

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

第一坑:下拉/上拉刷新