mui中关于滚动控件 scroll 在ios上的bug

原创

只有变秃才能变强 2022-09-28 14:57:47 博主文章分类：移动web开发 ©著作权

文章标签 ios bug mui scroll ico 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者只有变秃才能变强的原创作品，请联系作者获取转载授权，否则将追究法律责任

mui中关于滚动控件 scroll 在ios上的bug

官网说明:http://dev.dcloud.net.cn/mui/ui/#scroll

bug描述:

首先代码如下:

<body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">销售业绩汇总查询结果</h1>
        </header>

        <!--内容主体-->

        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content ">
            <div
                <!--数据列表-->
                <table class="table">
                    <!--<caption>响应式表格布局</caption>-->
                    <thead>
                        <tr>
                            <th>类品</th>
                            <th>季节</th>
                            <th>成交数量</th>
                            <th>成交金额</th>

                        </tr>
                    </thead>
                    <tbody class="my_table_body">
                        <tr class="my_tr">

                        </tr>

                    </tbody>
                </table>
            </div>

        </div>
    </body>

这是一个table表格布局,由于超出屏幕,有没有加上scroll控件,会使用默认滚动实现,

但是默认实现在我所测试的android机器上是没问题的,在ios上却出现上滑不能回弹的问题,

所以,我修改下代码:

<!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">
        <link rel="stylesheet" href="../css/bootstrap.min.css">

        <style>html,
            body {
                background-color:#efeff4;
            }

            .title {
                margin:20px 15px 10px;
                color:#6d6d72;
                font-size:15px;
            }

            .progress-red {
                width:100%;
                height:25px;
                background-color:#BD2130;
            }

            .progress-yellow {
                width:0%;
                height:25px;
                background-color:#E0A800;
            }</style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">销售业绩汇总查询结果</h1>
        </header>

        <!--内容主体-->

        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--数据列表-->
                <table class="table">
                    <!--<caption>响应式表格布局</caption>-->
                    <thead>
                        <tr>
                            <th>类品</th>
                            <th>季节</th>
                            <th>成交数量</th>
                            <th>成交金额</th>

                        </tr>
                    </thead>
                    <tbody class="my_table_body">
                        <tr class="my_tr">

                        </tr>

                    </tbody>
                </table>
            </div>

        </div>
    </body>
    <script src="../js/mui.min.js"></script>

    <script>false,
            pullRefresh: {
                container: '#pullrefresh',
                up: {
//                  auto: true, //可选,默认false.首次加载自动上拉刷新一次
                    contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                    callback: pullupRefresh
                }
            }
        });

        if(mui.os.plus) {
            mui.plusReady(function()
                setTimeout(function()
                    console.log("plusAPI加载完毕2!");
                    mui('#pullrefresh').pullRefresh().pullupLoading();//这句可以自动执行上拉刷新,有了这句就不要 auto:true

                }, 1000);

            });
        } else {
            mui.ready(function()
                console.log("muiDOM加载完毕!");
                mui('#pullrefresh').pullRefresh().pullupLoading();//这句可以自动执行上拉刷新,有了这句就不要 auto:true
            });
        }

        var begindate;
        var enddate;
        mui.plusReady(function()
            console.log("plusAPI加载完毕1!");
            var data = plus.webview.currentWebview(); //可以得到上个页面携带过来的数据

            begindate = data.startdate;
            enddate = data.enddate;

        });

        /**
         * 上拉加载具体业务实现
         */
        var page = 1;

        function pullupRefresh()
            console.log("上拉刷新请求数据开始!");
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //参数为true代表没有更多数据了。
            getdata(page++, 25, begindate, enddate);
            console.log("开始结束时间:!" + begindate + "---" + enddate);
            console.log("本次上拉刷新请求数据结束!");

        }

        function getdata(page,
            size,
            begindate,
            enddate)
            var wd = plus.nativeUI.showWaiting();
            console.log("开始网络请求");
            mui.post(plus.storage.getItem("url"), {
                act: "salesreport",
                username: plus.storage.getItem('TOKEN_USER'),
                key: plus.storage.getItem('TOKEN_LOGIN'),
                page: page,
                size: size,
                v_begindate: begindate,
                v_endate: enddate
            }, function(data)
                //服务器返回响应，根据响应结果，分析是否登录成功；
                //服务器返回响应，根据响应结果，分析是否登录成功；
                console.log("请求成功!");
                console.log("响应状态" + data.status);
                wd.close();
                if(data.status != "1") {
                    mui.alert(data.info);
                    console.log("请求失败!");
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    return;
                }

                if(data.lists.length == 0) {
                    mui.toast("没有数据了!");
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    return;
                }
                if(data.status == 1) {
                    var table = document.body.querySelector('.my_table_body');
                    for(var i = 0; i < data.lists.length; i++) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = '<td> ' + data.lists[i].attribname + '</td>' + '<td> ' + data.lists[i].attribname1 + '</td>' + '<td> ' + data.lists[i].qty + '</td>' + '<td> ' + data.lists[i].amt + '</td>';
                        //                          table.insertBefore(tr, table.lastChild);
                        table.appendChild(tr);
                        //mui('.mui-scroll-wrapper').scroll();
                    }
                }
                if(data.lists.length < size) {

                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    return;
                }
            }, 'json');
        }
    </script>

</html>

修改为:

<header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <!--<a class=" mui-icon mui-icon-email mui-pull-right" onclick="sendMessage()"></a>-->

            <h1 id="title" class="mui-title">会员回访</h1>

        </header>


            <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="mui-content">
                        <!--你的上拉刷新内容-->
                    </div>
                </div>
            <div>