VLONGEN
VLONGEN
  • 发布:2016-10-29 16:15
  • 更新:2017-10-16 14:48
  • 阅读:1921

【报Bug】Android 下拉刷新无效,iOS 正常

分类:MUI

先看代码:

<!DOCTYPE html>  
<html lang="zh-cmn-Hans">  
<head>  
    <meta charset="utf-8">  
    <title>首页</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">  
    <link rel="stylesheet" href="../libs/mui/css/mui.min.css">  
    <link rel="stylesheet" href="../libs/font-awesome-4.7.0/css/font-awesome.min.css">  
    <link rel="stylesheet" href="../libs/iconfont/iconfont.css">  
    <link rel="stylesheet" href="../style/NSmain.css">  
</head>  
<body>  
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">  
    <!--侧滑菜单部分-->  
    <aside id="offCanvasSide" class="mui-off-canvas-left">  
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <header class="mui-bar mui-bar-nav">  
                    <a id="offCanvasHide" class="mui-icon iconfont icon-fanhui1 offCanvasHide"></a>  
                </header>  
                <ul style="margin-top: 60px" class="mui-table-view mui-table-view-chevron mui-table-view-inverted">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right">  
                            <div class="NSlist-style" style="background-color: #00a0e9;"></div>  
                            约投资讯  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right">  
                            <div class="NSlist-style" style="background-color: #ffcc00;"></div>  
                            金牌投资人  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right">  
                            <div class="NSlist-style" style="background-color: #ff9900;"></div>  
                            明星项目  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right">  
                            <div class="NSlist-style" style="background-color: #66cc00;"></div>  
                            炫酷想法  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right">  
                            <div class="NSlist-style" style="background-color: #ff99cc;"></div>  
                            活动  
                        </a>  
                    </li>  
                </ul>  
            </div>  
        </div>  
    </aside>  
    <!--主界面部分-->  
    <div class="mui-inner-wrap">  
        <header class="mui-bar mui-bar-nav">  
            <a id="offCanvasShow" class="mui-icon iconfont icon-gengduo mui-pull-left mui-action-menu mui-icon-bars offCanvasShow"></a>  
            <a id="search" class="mui-icon iconfont icon-sousuo mui-pull-right"></a>  
            <h1 class="mui-title">首页</h1>  
        </header>  
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <div class="mui-content-padded">  
                        <!--内容-->  
                    <div class="mui-slider">  
                        <div class="mui-slider-group mui-slider-loop">  
                            <!--支持循环,需要重复图片节点-->  
                            <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../upload/images/homeslider/5.png" /></a></div>  
                            <div class="mui-slider-item"><a href="#"><img src="../upload/images/homeslider/1.png" /></a></div>  
                            <div class="mui-slider-item"><a href="#"><img src="../upload/images/homeslider/2.png" /></a></div>  
                            <div class="mui-slider-item"><a href="#"><img src="../upload/images/homeslider/3.png" /></a></div>  
                            <div class="mui-slider-item"><a href="#"><img src="../upload/images/homeslider/4.png" /></a></div>  
                            <div class="mui-slider-item"><a href="#"><img src="../upload/images/homeslider/5.png" /></a></div>  
                            <!--支持循环,需要重复图片节点-->  
                            <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../upload/images/homeslider/1.png" /></a></div>  
                        </div>  
                        <div class="mui-slider-indicator">  
                            <div class="mui-indicator mui-active"></div>  
                            <div class="mui-indicator"></div>  
                            <div class="mui-indicator"></div>  
                            <div class="mui-indicator"></div>  
                            <div class="mui-indicator"></div>  
                        </div>  
                    </div>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                    <h1>测试内容</h1>  
                </div>  
            </div>  
        </div>  
         <!--off-canvas backdrop-->  
        <div id="backdrop" class="mui-off-canvas-backdrop"></div>  
    </div>  
</div>  
<script src="../libs/mui/js/mui.min.js"></script>  
<script src="../libs/vue.min.js"></script>  
<script src="../libs/Chart.js"></script>  
<script src="../script/NSScrollMenu.js"></script>  
<script>  
"use strict";  
mui.init({  
    pullRefresh : {  
        container:"#offCanvasContentScroll",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
        down : {  
            height:50,//可选,默认50.触发下拉刷新拖动距离,  
            auto: true,//可选,默认false.自动下拉刷新一次  
            contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容  
            contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容  
            contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容  
            callback :pullfresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
        }  
    },  
    //监听Android手机的back、menu按键  
    keyEventBind: {  
        backbutton: false,  //Boolean(默认true)关闭back按键监听  
        menubutton: false   //Boolean(默认true)关闭menu按键监听  
    }  
});  
function pullfresh() {  
    console.log('pullfresh is OK');  
    mui('#offCanvasContentScroll').pullRefresh().endPulldownToRefresh();  
}  
//获得slider插件对象  
var gallery = mui('.mui-slider');  
gallery.slider({  
    interval:1200//自动轮播周期,若为0则不自动播放,默认为0;  
});  
mui('.mui-scroll-wrapper').scroll({  
    deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006  
});  
</script>  
</body>  
</html>  

以上就是页面代码,在 iOS 中下拉刷新正常,在 Android 就不行

2016-10-29 16:15 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

11月14日,此问题依然存在

Lnews

Lnews

你把mui.min,js换成mui.js试试,不要用压缩版的

五叶神

五叶神 - 世界上没有免费的午餐,也不要有一颗贪婪的心

这就不是bug,安卓 ios下拉是不同机制,安卓做下拉刷新必须要是父子嵌套webview结构,ios就不需要

  • 五叶神

    这个文档里面早就写了

    2016-11-14 16:36

2***@qq.com

2***@qq.com

记下

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