mui之ios上拉刷新不显示数据的bug

最新推荐文章于 2019-03-02 08:48:39 发布
最新推荐文章于 2019-03-02 08:48:39 发布
阅读量1.6k 收藏
点赞数
文章标签： bug hbuilder 上拉下拉刷新 ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itguangit/article/details/78210686
版权

关于上拉刷新的官方说明:http://dev.dcloud.net.cn/mui/pullup/

bug描述:

首先,先上代码:


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



        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.appendChild(tr);

                    }
                }
                if(data.lists.length < size) {

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

</html>

这些代码,看似没有任何问题,并且在android上完美运行,但是ios上运行却无法显示数据,页面一直显示正在加载,由于没有mac,我是使用.ipa的包安装测试的,这样一来无法进行ios下真机运行调试,费了好大劲,才发现了bug所在:

原因: plus 环境在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>
        mui.init({
            swipeBack: 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>

只需要加上这几句代码:


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
            });
        }

意思是:等到plus 环境准备好,再进行上拉刷新,mui('#pullrefresh').pullRefresh().pullupLoading();,这句代码可以自动执行上拉刷新,所以需要注意的是,再上拉刷新的参数配置中,去掉自动刷新的代码 auto:true.

PostTruth
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MUI选项卡下拉刷新上拉加载demo
12-10
这是一个基于mui框架下实现的一个上拉刷新，下拉加载的一个数据加载demo这样的做法是为了提高用户的体验感，减少服务器的压力~
vue和mui组合使用之 mui中pullRefresh的使用bug
qq_485114707的博客
12-19 214
就能在vue 中cli的调用mui的下拉刷新啦 上拉刷新也是同理 踩坑已踩。结合使用按照文档会报提示.endPullupToRefresh()函数不存在。然后在getData函数中加入下列代码。在mounted 函数中加入下面代码。各种百度尝试后试了下面方法好了。
MUI webapp上拉加载在IOS手机上显示异常（提示文字显示在顶部，上拉变成了下拉）问题解决
haoyue1014的专栏
03-02 857
问题现象： （1）MUI webapp上拉加载在android手机上正常 （2）在IOS手机上，“上拉加载更多”、"没有数据了"提示文字，显示在列表顶部，而不是底部。 （3）在IOS手机上，上拉的动作变成了下拉 源码： mui.init({ pullRefresh: { container: '#pullrefresh', up: { auto:true, con...
MUI在ios中的一些问题
Mr-k的博客
12-29 7943
MUI开发中，ios跟Android是存在差异，目前碰到的问题有以下几种 1，IOS跟Adroid在margin值时，存在差异，这时候只要让手机判断是IOS还是Android即可，这里给出两种方式判断 console.log（mui.os）,可以看到//第一种if(mui.os.android){ //注意，这里是小写的android $("#header").css("margin-to
使用mui框架，苹果手机不显示上拉刷新更多
luckyJieXu的博客
08-07 1784
突然发现在上拉刷新列表时候，操作过快数据出现重复问题，改了一下午发现以下几个问题： 1、对于上拉刷新，安装手机与苹果手机是走mui不同的方法； 2、现在mui最新版本已经解决了上拉刷新重复问题，如果你使用的是MUIv3.6.0及一下版本，这个问题还没解决，但是可以通过 更改mui插件里相关代码，这个问题我只在苹果手机上发现，所以改的代码只适用苹果手机下拉刷新的问题。 我们可以将this....
mui之上拉刷新和mui-content结合解决ios上拉不回弹的bug
只有变秃 才能变强
10-12 2854
模版 <body> <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-pu
mui上拉加载更多下拉刷新数据的封装过程
08-28
mui的上拉加载和下拉刷新类似，都属于pullRefresh插件。今天小编抽空给大家分享mui上拉加载更多下拉刷新数据的封装过程，需要的朋友参考下吧
MUI实现上拉加载和下拉刷新效果
08-30
主要为大家详细介绍了MUI实现上拉加载和下拉刷新效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
MUI 上拉刷新/下拉加载功能实例代码
08-30
主要介绍了MUI 上拉刷新/下拉加载功能实例代码，包括一些个人心得，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
MUI进行APP混合开发实现下拉刷新和上拉加载 原创
01-05
首先，我们的环境是使用HBuilder通过MUI开发APP，这种混合开发适合安卓和苹果两个平台，本次我们给大家写的代码是把上拉加载和下拉刷新单独分离开，一起来学习下。 为实现下拉刷新功能，大多H5框架都是通过DIV模拟...
mui的poppicker一级选择，设置默认值
热门推荐
肖肖肖丽珠的博客
07-26 2万+
一级选择示例如上图，在实际的项目中，下面列表的内容都是后台接口给的数据。所以第一个就是选中的，也就是给你的列表的第一个值。但是如果给你一个默认值。点开第一个显示的不给他给你的列表的第一个值，而是你默认选择的那个值。这个时候该怎么办呢？ 这里我们从头开始说起。 假如现在有个接口给你了。List:[{vid:"'}] var  shopList1=[];   //可以选择的列表实际上
IOS 处理分页数据的上拉下拉刷新
lvlei19911108的博客
02-14 1803
@interface Phy_PackagesController () { MKNetworkOperation *op; NSMutableArray *array; NSMutableArray *array2; NSInteger _page,_page2; NSInteger _pageSize,_pageSize2; } @property (
mui下拉刷新在安卓真机环境下无效
chenwuai的专栏
06-14 3989
问题：。下拉刷新在浏览器及IOS环境中可以正常使用，但是打包成安卓应用程序，打开后下拉刷新就无法使用，但是上拉加载可以使用网上搜了一下，找到了一些方法目前总结出了两种。 你如果急切的想知道解决方法，请直接略过问题。 一：问题 HTML   图1 html dom结构 JS 我也使用了VUE进行双向绑定。 图2 js代码mui.init初始化   上面这张图是VUE的安装时间...
MUI解决页面无法滚动的问题
qq_29407683的博客
05-14 9639
(function($){ $(".mui-scroll-wrapper").scroll({ bounce: false,//滚动条是否有弹力默认是true indicators: true, //是否显示滚动条,默认是true }); })(mui);
MUI上拉加载失效 或下拉刷新失效问题
weixin_42307129的博客
12-19 5016
   //重新激活mui('#下拉容器id').pullRefresh().refresh(true); 假设从A上拉加载能用但是切换到B不能使用上拉加载了在切换的事件上重新激活mui('#上拉容器id').pullRefresh().refresh(true);即可，原因应该就是在A页时上拉加载到底部没有更多数据了执行mui('#pullrefresh').pullRefresh().e...
【vue】ios在详情页中返回到列表页出现空白的问题
炒饭的博客
08-07 3217
移动端开发 vue项目中，ios机器上点击返回列表页的时候，会出现空白现象，触屏一下或者拉动一下，数据才会显示出来，针对此问题，尝试了很多次，最终解决方法如下： 给列表的外层容器加上如下样式： overflow-y: auto; -webkit-overflow-scrolling: touch; height:100%; 只需几句css 就能搞定...
mui http ios 获取不了数据库数据
最新发布
01-13
如果你正在使用 MUI 库来开发 iOS 应用程序，并且在尝试使用 HTTP 请求从数据库获取数据时遇到了问题，那么可能有以下几种原因： 1. 你的 HTTP 请求没有发送成功。在这种情况下，你需要检查你的网络连接是否正常，以及请求的 URL 是否正确。 2. 你的数据库服务器没有正确配置。如果你使用的是 MySQL 数据库，那么你需要确保服务器已经安装并正确配置了 MySQL 服务。 3. 你的数据库表中没有数据。在这种情况下，你需要确保你的数据库表中有数据，并且你的 SQL 查询语句是正确的。 4. 你的服务器端代码有问题。如果你的服务器端代码有 bug，那么可能会导致数据获取失败。你需要检查你的服务器端代码，确保它能够正确执行 SQL 查询并返回数据。 如果你仍然无法解决问题，那么建议你尝试调试你的代码，或者提供更多信息，以便我们帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值