先看代码:
<!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 就不行
4 个回复
1***@qq.com
11月14日,此问题依然存在
Lnews
你把mui.min,js换成mui.js试试,不要用压缩版的
五叶神 - 世界上没有免费的午餐,也不要有一颗贪婪的心
这就不是bug,安卓 ios下拉是不同机制,安卓做下拉刷新必须要是父子嵌套webview结构,ios就不需要
五叶神
这个文档里面早就写了
2016-11-14 16:36
2***@qq.com
记下