最近很多人给博主发信息说用MUI这个框架使用下拉刷新插件的时候,在电脑和苹果手机测试都没有问题,但是一上线却发现安卓打包成APP后无法使用的问题。针对这一问题,博主只想说大家在开发的过程中真的是没有认真官方的文档,官方文档这么说的:为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画;在iOS平台,H5的动画已经比较流畅,故依然使用H5方案。

错误示例:

<!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>MUI下拉刷新</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">人员名称: monkey</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">人员名称: monkey ' + (i + 1) + '</a>';
                table.appendChild(li);
            }
        }, 1500);
    }
</script>

</html>

既然说这个是错误的例子,那自然就是下拉刷新不兼容安卓的,我们通过这个例子和大家说说为何不兼容。

官方的下拉刷新分为3种:

1.单webview下拉刷新

2.双webview下拉刷新

3.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>

这样就可以实现打包成安卓APP后下拉刷新无兼容问题