<!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" />
</head>
<body>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<p>MMMM</p>
<p>aaaa</p>
<p>MMMM</p>
<p>aaaa</p>
<p>MMMM</p>
</div>
</div>
</aside>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">标题</h1>
</header>
<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 class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<div id="pullrefresh">
<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>
</ul>
</div>
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
//这里一旦加上下拉，内容就不能滚动了！！！！
mui.init({
pullRefresh : {
container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down : {
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
height:'50px',//可选,默认50px.下拉刷新控件的高度,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: false,//可选,默认false.首次加载自动上拉刷新一次
callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
mui('.mui-scroll-wrapper').scroll();
mui('#pullrefresh').scroll();
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();
mui('#pullrefresh').scroll();
}
mui('.mui-scroll-wrapper').scroll();
mui('#pullrefresh').scroll();
</script>
</html>
1***@qq.com
- 发布：2017-12-20 17:58
- 更新：2017-12-20 18:47
- 阅读：1529
1***@qq.com (作者)
.mui-scroll-wrapper{
overflow-y: scroll !important;
overflow: auto;
height: 100%;
}
加高度，加滚动条后，确实可以滚动了，但和下拉刷新冲突了。
请问如何处理？
2017-12-20 20:02