注册 登录
爱慕啼
爱慕啼
  • 发布：2015-09-18 11:35
  • 更新：2018-05-14 12:24
  • 阅读：6616

上拉加载数据为什么我的只能上拉加载一次

分类：MUI

一个数据列表，每两个数据为一页，p代表页码。
第一次上拉可以加载的数据，pullupRefresh() 方法中console.log("正在上拉加载");都可以输出，
第二次上拉会一直显示上拉的等待图片，没有执行pullupRefresh() 方法中console.log("正在上拉加载");的
log输出，不知是什么原因？

mui.init({  
        pullRefresh: {  
                container: "#refreshContainer",   
                    down: {  
                        contentdown: "刷新数据",  
                        contentover: "释放立即刷新",  
                        contentrefresh: "正在刷新...",  
                        callback: pulldownRefresh  
                    },  
                    up: {  
                        contentrefresh: "正在加载...",  
                        contentnomore: '没有更多数据了',  
                        callback: pullupRefresh  
                    }  
                }  
            });
        var p =1;  
    function pullupRefresh() {  
        console.log("正在上拉加载");  
        setTimeout(function() {  
            p++;  
                    console.log(p);  
                    var par={  
                        "p":p,  
                        "dbteacher": "1"  
                    }  
                    handleData("search_list","http://192.168.1.11/",par);  
                }, 1000);  
            }
2015-09-18 11:35 负责人:无 分享

没有找到相关结果

    已邀请:
    小毛虫

    小毛虫

    之前也遇到过，记得刷新完成的时候调用mui('#pullrefresh').pullRefresh().endPullupToRefresh(true|false);

    2015-09-22 12:20 分享

    • 情伤

      有数据需要调用,没数据也需要调用;唯一区别是,还有数据,传入false,没有数据了,需要传入true

      2018-01-11 14:09

    评论 取消
    DCloud_UNI_FXY

    DCloud_UNI_FXY

    贴完整代码。

    2015-09-19 17:22 分享
    有闲无聊

    有闲无聊

    我也遇到了相同问题，请问解决了吗

    2015-09-21 15:20 分享

    • 爱慕啼 (作者)

      http://dcloudio.github.io/mui/javascript/#pullrefresh-up


      加载完新数据后，需要执行endPullupToRefresh()方法

      2015-09-21 16:24

    评论 取消
    露珠

    露珠

    我也遇到这样的问题了，请问怎么解决 

        <script src="../../../js/mui.min.js"></script>  
    <script type="text/javascript" src="../../../js/jquery-2.1.4.min.js"></script>  
    <script type="text/javascript" src="../../../js/helper.js"></script>  
    <script type="text/javascript" src="../../../js/md5.js"></script>  
    <script type="text/javascript" src="../../../js/tools.js"></script>  
    <script type="text/javascript" src="../../../js/knockout.js"></script>  
    <script type="text/javascript">  
        mui.init({  
            pullRefresh: {  
                container: "#pullrefresh",  
                down: {  
                    contentdown: "下拉可以刷新",  
                    contentover: "释放立即刷新",  
                    contentrefresh: '正在刷新...',  
                    callback: function() {  
                        vm.Page.PI = 1;  
                        load();  
                    }  
                },  
                up: {  
                    contentrefresh: "正在加载…",  
                    contentnomore: '已加载全部',  
                    callback: function() {  
                        vm.Page.PI = vm.Page.PI + 1;  
                        load();  
                    }  
                }  
            }  
        });  
        var vm = {  
            Page: {  
                PI: 1,  
                PC: 0  
            },  
            Is: ko.observableArray(),  
        };  
        ko.applyBindings(vm);  
        mui.plusReady(function() {  
            load();  
            mui('#supplier').on('tap', 'li', function() {  
                localStorage.setItem(LS.CSupplierId, this.dataset.value);  
                var webview = mui.openWindow({  
                    url: '../product/product_main.html',  
                    id: 'wproduct_main',  
                    show: {  
                        aniShow: 'pop-in',  
                        duration: 300  
                    },  
                    extras: {  
                        pageId: 'meInfo'  
                    },  
                    styles: {  
                        top: '0px',  
                        bottom: '0px',  
                    },  
                    waiting: {  
                        autoShow: false  
                    }  
                });  
            });  
        }); //获得slider插件对象  
        function load() {  
            var cId = localStorage.getItem(LS.CCityId) == null ? 0 : localStorage.getItem(LS.CCityId);  
            var sData = []  
            sData.push({  
                name: "StreetId",  
                value: localStorage.getItem(LS.CCityId) == null ? 0 : localStorage.getItem(LS.CCityId)  
            });  
            var par = sData.concat(ObjectToArray(vm.Page));  
            post('Supplier_list', par, function(data) {  
                if (vm.Page.PI == 1) {  
                    vm.Is([]);  
                }  
                vm.Is(vm.Is().concat(data.Is));  
                vm.Page.PC = data.PC;  
                if (vm.Page.PI == 1) {  
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh();  
                    mui('#pullrefresh').pullRefresh().refresh(true);  
                } else {  
                    if (vm.Page.PI == vm.Page.PC) {  
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
                    } else {  
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();  
                    }  
                }  
            });  
        };  
    </script>
    2015-09-22 15:03 分享
    虞徒儿

    虞徒儿

    解决了吗？我也遇到了问题 ajax 数据只加载一次

    2017-02-24 14:00 分享
    虞徒儿

    虞徒儿

    贴一个解决办法 在回掉函数里执行this.endPullupToRefresh(false); 注意是flase

    2017-02-24 14:09 分享

    • 野蛮生长

      这个我一开始就有加，仍然不行。

      2017-05-10 09:26

    • jays611

      我就是用这个方法解决的问题，多谢多谢，给你赠送积分10表示感谢。我用的是vue+jQ+mui

      2018-05-14 12:22

    评论 取消
    amourz

    amourz

    这涉及到分页了。
    设页面总数为pages,当前页面为page
    var page=0; 

            /**  
         * 上拉加载具体业务实现  
         */  
        function pullupRefresh() {  
            setTimeout(function() {  
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++page > pages));   
                loaddata(page);// 加载当前页的数据    
            }, 1500);  

        }
    2017-02-24 14:44 分享
    虞徒儿

    虞徒儿

    看附件

    2017-02-24 15:27 分享
    狼烟蛮蛮

    狼烟蛮蛮 - 北京前端

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <!--<script type="text/javascript" charset="UTF-8">
    mui.init();
    </script>-->
    <style type="text/css">
    .container{width: 50%;}
    .right{width: 50%;position: fixed;top: 200px;right: 0;}
    </style>
    </head>
    <body>
    <div class="container mui-content mui-scroll-wrapper" id="contanier">
    <div class="mui-scroll" style="padding-top:35px;"> 

        <ul class="mui-table-view" id="ul">  
        <li class="mui-table-view-cell">1</li>  
        <li class="mui-table-view-cell">2</li>  
        <li class="mui-table-view-cell">3</li>  
        <li class="mui-table-view-cell">4</li>  
        <li class="mui-table-view-cell">5</li>  
        <li class="mui-table-view-cell">6</li>  
        <li class="mui-table-view-cell">7</li>  
        <li class="mui-table-view-cell">8</li>  
        <li class="mui-table-view-cell">9</li>  
        <li class="mui-table-view-cell">10</li>  
        <li class="mui-table-view-cell">11</li>  
        <li class="mui-table-view-cell">12</li>  
        <li class="mui-table-view-cell">13</li>  
        <li class="mui-table-view-cell">14</li>  
        <li class="mui-table-view-cell">15</li>  
        <li class="mui-table-view-cell">16</li>  
        <li class="mui-table-view-cell">17</li>  
    </ul>  
    </div>  
</div>  
<div class="right">  
    <a href="test.html">action</a>  
</div>

    </body>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    mui.init({
    pullRefresh:{
    container:'#contanier',
    down:{
    contentdown:'下拉可以刷新',
    contentover:'释放立即刷新',
    contentrefresh:'正在加载。。。',
    callback:pulldownRefresh
    }
    }
    })
    var flage = true;
    var pagenum = 1;
    var li_val = 17;
    function pulldownRefresh(){
    setTimeout(function(){
    if(flage){
    var ul =document.getElementById('ul');
    for(var i=0;i <5;i++){
    li_val++;
    $('#ul li:first-child').before('<li class="mui-table-view-cell">a'+li_val+'</li>');
    // $("ul li:last-child").after(bikeHtml);
    }
    mui('#contanier').pullRefresh().endPulldownToRefresh(!flage);
    }
    },500)
    }
    if (mui.os.plus) {
    mui.plusReady(function() {
    setTimeout(function() {
    mui('#contanier').pullRefresh().pulldownLoading();
    }, 500);
    });
    } else {
    mui.ready(function() {
    mui('#contanier').pullRefresh().pulldownLoading();
    });
    }
    </script>
    </html>

    2017-02-24 15:47 分享
    jays611

    jays611 - 微信 jays611，easyEcharts图表，拓扑，canvas绘制

    <script>
    //a链接失效，加上
    mui('body').on('tap','a',function(){
    window.top.location.href=this.href;
    });
    var vm=new Vue({
    el:"#pullrefresh",
    data:{
    ListItem:[],
    page:1,
    limit:10
    },
    created:function () {
    var that=this;
    mui.ajax("{:url('/wx/user/ticket_order')}",{
    data:{
    userid:"{$userid}",
    page:that.page,
    limit:that.limit
    },
    dataType:'json',//服务器返回json格式数据
    type:'post',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒；
    headers:{'Content-Type':'application/json'},
    success:function(data){
    console.log(data);
    that.ListItem = data;
    },
    error:function(xhr,type,errorThrown){
    //异常处理；
    console.log(type);
    }
    });
    },
    updated:function(){
    var that=this;
    this.$nextTick(function(){
    mui.init({
    pullRefresh : {
    container:'#pullrefresh',
    up : {
    contentrefresh : "正在加载...",
    contentnomore:'没有更多数据了',
    callback:function () {
    console.log(":");
    clearTimeout(timR);
    var that=this;
    var timR=setTimeout(function() {
    mui.ajax("{:url('/wx/user/ticket_order')}",{
    data:{
    userid:"{$userid}",
    page:++vm.page,
    limit:vm.limit
    },
    dataType:'json',//服务器返回json格式数据
    type:'POST',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒；
    headers:{'Content-Type':'application/json'},
    success:function(data){
    console.log(data);
    //服务器返回响应，根据响应结果，分析是否登录成功；
    if(data.length>0){
    vm.ListItem = vm.ListItem.concat(data);
    console.log(vm.page);
    that.endPullupToRefresh(false);
    }else{
    mui.toast('没有更多数据了',{ duration:'short', type:'div' });
    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
    }
    },
    error:function(xhr,type,errorThrown){
    //异常处理；
    console.log(type);
    }
    }); 

                              }, 1000);  

                      }  

                  }  
              }  
          });  

          $(".off-order").on("click",function () {  
              mui.confirm("是否取消订单","提示:");  
          })  
      })  
  }

    });

    </script>

    2018-05-14 12:24 分享
    为什么被折叠? 0 个回复被折叠

    该问题目前已经被锁定, 无法添加新回复

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报