忘语忘行
忘语忘行
  • 发布:2016-07-26 16:13
  • 更新:2019-06-13 10:19
  • 阅读:8852

Android真机环境下下拉刷新失效

分类:MUI

初学MUI,在练习mui的下拉刷新和上拉加载demo时,想练习一个html页面下实现下拉刷新和上拉加载,发现在真机环境中下拉刷新失效,上拉加载正常,源码如下

<!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" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <title>下拉刷新和上拉加载(单页模式)</title>  
    <link href="../../css/mui.css" rel="stylesheet"/>  
    <link href="../../css/style.css" rel="stylesheet"/>  
</head>  
<body>  
    <div class="page" id="demo">  
        <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" v-el:pullrefresh class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <!--数据列表-->  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li v-for="item in lists" class="mui-table-view-cell">  
                        <a class="mui-navigate-right">{{item.text}}</a>  
                    </li>  
                </ul>  
            </div>  
        </div>  
    </div>  
    <script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>  
    <script src="../lib/mui.js"></script>  
    <script>  
        var vm = new Vue({  
            el:'#demo',  
            data:{  
                lists:[]  
            },  
            ready:function(){  
                var _this = this;   
                mui.init({  
                    pullRefresh: {  
                        container: _this.$els.pullrefresh,  
                        down: {  
                            callback: _this.pulldownRefresh  
                        },  
                        up: {  
                            contentrefresh: '正在加载...',  
                            callback: _this.pullupRefresh  
                        }  
                    }  
                });  
                var len = this.lists.length;  
                for(var i=1;i<=20;i++){  
                    this.lists.push({text:'Item '+(len+i)});  
                }  
                mui.ready(function() {  
                    mui(_this.$els.pullrefresh).pullRefresh().pullupLoading();  
                });  
            },  
            methods:{  
                pulldownRefresh:function(){  
                    console.log("pulldownRefresh");  
                    var len = this.lists.length;  
                    setTimeout(function() {  
                        for(var i=1;i<=3;i++){  
                            this.lists.unshift({text:'Item '+(len+i)});  
                        }  
                        mui(this.$els.pullrefresh).pullRefresh().endPulldownToRefresh();  
                    }.bind(this),1500);  

                },  
                pullupRefresh:function(){  
                    console.log("pullupRefresh");  
                    var len = this.lists.length;  
                    setTimeout(function() {  
                        mui(this.$els.pullrefresh).pullRefresh().endPullupToRefresh((len > 100));  
                        for(var i=1;i<=3;i++){  
                            this.lists.push({text:'Item '+(len+i)});  
                        }  
                    }.bind(this),1500);  
                }  
            }  
        });  
    </script>  
</body>  
</html>

使用了vue结合,在浏览器环境中一切正常,在模拟器中不能下拉刷新,直接拖不动
浏览器截图:

控制台打印:


是不是在Android环境中必须使用父子页面才能下拉刷新?可不可以使用一个页面实现?

2016-07-26 16:13 负责人:无 分享
已邀请:
忘语忘行

忘语忘行 (作者)

好吧,问题解决了,不过要改源码,说下解决方式
1 在引入mui前添加一个全局变量
<script>var h5pullDown = true;</script>
2 修改源码两处



问题暂时是解决了,不过需要改源码终究是不爽,可不可以添加配置什么的让开发者决定是否使用父子webview的方式来下拉刷新

  • 忘语忘行 (作者)

    图中红框处h5pullDown改成window.h5pullDown,免得环境中没有h5pullDown变量会报错

    2016-07-27 14:14

  • 9***@qq.com

    这源码是指哪个文件啊?

    2016-09-02 16:43

  • lxl

    我是用的父子页面,也是遇到了偶尔不能下拉的问题,按照你的方法改了可以下拉了。这是mui的bug吧,而且这代码好冗余,看的头都大了,一个下拉绕了那么多代码

    2017-01-11 16:14

  • SixGodWill

    回复 忘语忘行:十分感谢!

    2018-04-03 09:36

  • 1***@163.com

    回复 忘语忘行:大佬,十分感谢!这样弄得话,没有bug吧

    2018-06-04 17:35

lsvih

lsvih

你把创建vue对象的整个代码全部放在 mui.plusReady(function(){ new vue xxxxxx })中试试

  • 忘语忘行 (作者)

    还是无法下拉刷新,爆出错误: Uncaught TypeError: Cannot read property 'classList' of undefined at src/lib/mui.js:3287

    2016-07-26 16:28

忘语忘行

忘语忘行 (作者)

补充:针对控制台打印的错误,plus is not defined,我把mui.init()方法放在mui.plusReady()中,不报错了,但还是不能正常下拉刷新
在mui.js源码中$.addInit这一段代码中

代码进入了5+的初始化中,初始化pull down失败了的,红框处是我加的打印

忘语忘行

忘语忘行 (作者)

继续查看了源码,在Android真机环境中,pullRefresh方法被覆写了

这是要强制使用父子页面的形式?

j***@163.com

j***@163.com

找了一下午,才找到这儿,总算是解决了

虞徒儿

虞徒儿

解决了吗,我的上拉不行。。。

1***@qq.com

1***@qq.com

楼主厉害,果然改下源码就好了!

杰哥seo

杰哥seo

mark

s***@163.com

s***@163.com

找的我好辛苦,感谢楼主!

2***@qq.com
1***@163.com

1***@163.com

给大佬递茶啊厉害了!困扰我很久

8***@qq.com

8***@qq.com - 你好

问题这个多,让人怎么用啊!!!!!!!老的问题还没解决,新的问题又来了,连个文档都没有

2***@qq.com

2***@qq.com

我去掉 scroll初始化后 安卓机也可以滑动顺畅了

xysmc1

xysmc1 - www

也遇到这个问题,希望官方尽快解决。

1***@163.com

1***@163.com

这样改会会比较卡,怎么解决啊?

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