MUI安卓下拉刷新无反应的问题（但是在mui官方demo是可以的）；

最新推荐文章于 2024-04-06 09:47:23 发布

老毕姥爷

最新推荐文章于 2024-04-06 09:47:23 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：混合app 文章标签： mui 混合APP

本文链接：https://blog.youkuaiyun.com/qq_38387487/article/details/79288548

混合app 专栏收录该内容

20 篇文章

订阅专栏

本文介绍MUI框架在不同设备上的下拉刷新兼容性问题及解决方案，特别是在安卓设备中遇到的问题。通过调整代码布局，采用双webview下拉刷新的方式，确保安卓APP中的下拉刷新功能正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近使用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后下拉刷新无兼容问题