<!doctype html>
<html>
<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 href="../css/mui.min.css" rel="stylesheet" />
<style>
.mui-scroll-wrapper{
overflow-y: scroll !important;
height: 100%;
}
</style>
</head>
<body>
<!-- 主界面移动、菜单不动 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
</div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 3</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 4</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 5</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 6</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 7</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 8</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 9</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 10</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 11</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 12</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 13</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 14</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 15</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 16</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 17</a>
</li>
</div>
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
pullRefresh : {
container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down : {
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
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">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
mui('.mui-scroll-wrapper').scroll();
</script>
</html>
1***@qq.com
- 发布：2017-12-21 22:19
- 更新：2017-12-21 22:19
- 阅读：1271
【报Bug】侧滑+单webview模式下拉刷新，加了overflow-y: scroll后页面可以滚动了，但页面在中部下拉滚动条也会触发下拉刷新，而不是在顶部下拉刷新
分类：MUI
