参考官方例子安卓下拉刷新失败？

分类：MUI

mui

<!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>  
    <link href="../css/mui.css" rel="stylesheet"/>  
</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 class="mui-content">  
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <!--数据列表-->  
            <ul class="mui-table-view mui-table-view-chevron mt50">  
                <li class="mui-table-view-cell">  
                    <a href="sp-upcoming-test-detail.html" class="mui-navigate-right">人员名称: 张三</a>  
                </li>  
            </ul>  
        </div>  
    </div>  
</div>  

</body>  
<script src="../js/mui.js"></script>  
<script type="text/javascript" charset="utf-8">  
    mui.init({  
        pullRefresh: {  
            container: '#pullrefresh',  
            down: {  
                callback: pulldownRefresh  
            },  
            up: {  
                contentrefresh: '正在加载...',  
                callback: pullupRefresh  
            }  
        }  
    });  

    /**  
     * 下拉刷新具体业务实现  
     */  
    function pulldownRefresh() {  
        setTimeout(function () {  
            var table = document.body.querySelector('.mui-table-view');  
            var cells = document.body.querySelectorAll('.mui-table-view-cell');  
            for (var i = cells.length, len = i + 3; i < len; i++) {  
                var li = document.createElement('li');  
                li.className = 'mui-table-view-cell';  
                li.innerHTML = '<a class="mui-navigate-right">人员名称:  ' + (i + 1) + '</a>';  
                //下拉刷新，新纪录插到最前面；  
                table.insertBefore(li, table.firstChild);  
            }  
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
        }, 1500);  
    }  
    var count = 0;  
    /**  
     * 上拉加载具体业务实现  
     */  
    function pullupRefresh() {  
        setTimeout(function () {  
            mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
            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">人员名称: 张三 ' + (i + 1) + '</a>';  
                table.appendChild(li);  
            }  
        }, 1500);  
    }  
</script>  

</html>

在chrome上和ios上可以实现下拉刷新，但是安卓有问题，不可以下拉刷新呢？

2017-05-24 16:42 负责人:无分享

3 个回复

LLgg

官方的下拉刷新分为3种：
①单webview下拉刷新
②双webview下拉刷新
③div模拟下拉刷新。

你在安卓使用的的是双webview下拉刷新，但是你在电脑上面测试的时候，也就是没有在html5+的环境下测试的时候，是自动给你替换成了div模拟下拉刷新，所以你在电脑上面可以看到下拉刷新效果，到了打包之后app里面之后，就启用了双webview下拉刷新的模式，但是你没有按照双webview下拉刷新的模板去写，所以在app里面就失效了。（ios里面可以正常使用，因为ios流畅度较高，打包之后，并没有启用双webview下拉刷新的模式，用的还是div下拉刷新模式，）

但是可以对你代码稍微修改一下即可，改成双webview下拉刷新规范的代码布局。

双webview下拉刷新分为2个页面，主页面，子页面，

主页面

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>主页面</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <link rel="stylesheet" href="css/mui.min.css">  
    </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>  

    </body>  
    <script src="js/mui.min.js"></script>  
    <script type="text/javascript">  
        mui.init({  
            subpages:[{          //调用子页面刷新的代码  
                url:'子页面的地址',   //子页面的地址  
                id:'子页面的id',     //子页面的id，可以自己根据需求随便设置  
                styles:{  
                    top: '45px',            //子页面距离顶部的距离  
                    bottom: '0px',         //子页面距离底部的距离  
                }  
            }]  
        });  
    </script>  
</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"/>  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  

<body>  
<div class="mui-content">  
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <!--数据列表-->  
            <ul class="mui-table-view mui-table-view-chevron mt50">  
                <li class="mui-table-view-cell">  
                    <a href="sp-upcoming-test-detail.html" class="mui-navigate-right">人员名称: 张三</a>  
                </li>  
            </ul>  
        </div>  
    </div>  
</div>  

</body>  
<script src="js/mui.min.js"></script>  
<script type="text/javascript" charset="utf-8">  
    mui.init({  
        pullRefresh: {  
            container: '#pullrefresh',  
            down: {  
                callback: pulldownRefresh  
            },  
            up: {  
                contentrefresh: '正在加载...',  
                callback: pullupRefresh  
            }  
        }  
    });  

    /**  
     * 下拉刷新具体业务实现  
     */  
    function pulldownRefresh() {  
        setTimeout(function () {  
            var table = document.body.querySelector('.mui-table-view');  
            var cells = document.body.querySelectorAll('.mui-table-view-cell');  
            for (var i = cells.length, len = i + 3; i < len; i++) {  
                var li = document.createElement('li');  
                li.className = 'mui-table-view-cell';  
                li.innerHTML = '<a class="mui-navigate-right">人员名称:  ' + (i + 1) + '</a>';  
                //下拉刷新，新纪录插到最前面；  
                table.insertBefore(li, table.firstChild);  
            }  
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
        }, 1500);  
    }  
    var count = 0;  
    /**  
     * 上拉加载具体业务实现  
     */  
    function pullupRefresh() {  
        setTimeout(function () {  
            mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
            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">人员名称: 张三 ' + (i + 1) + '</a>';  
                table.appendChild(li);  
            }  
        }, 1500);  
    }  
</script>  

</html>

这是我的网站，O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb

9***@qq.com (作者)

恩，但是分主次页面后，主页面有个搜索功能，子页面是列表，在主页面触发搜索功能后，子页面怎么监听到呢？

2017-05-26 11:37

LLgg

mui的下拉刷新在安卓下面使用的是双webview下拉刷新，在ios上面使用的是div下拉刷新

但是官方的下拉刷新文档说明的不是很清楚，导致用户直接复制子页面的刷新事件去测试，正巧就出现了mui的下拉刷新在浏览器里面和ios可以刷新，但是打包安卓之后就出现异常的情况。

9***@qq.com (作者)

分主次页面后，主页面有个搜索功能，子页面是列表，在主页面触发搜索功能后，子页面怎么监听到呢？

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

参考官方例子安卓下拉刷新失败？

3 个回复

公告

相关问题

参考官方例子安卓下拉刷新失败？

与内容相关的链接

3 个回复

公告

相关问题