我用官方案例 “选项卡切换+下拉刷新” 给 “侧面选项卡-div模式” 增加了 上拉刷新功能，加完后，发现 我只要向上滑动（比方在页面顶部的时候，还不需要再次加载数据） ，就会 触发加载数据，而不是 滚动到页面底部时候再触发。我实在找不到原因。
下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.mui-row.mui-fullscreen>[class*="mui-col-"] {
height: 100%;
}
.mui-col-xs-3,
.mui-control-content {
overflow-y: auto;
height: 100%;
}
.mui-segmented-control .mui-control-item {
line-height: 50px;
width: 100%;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
background-color: #fff;
}
</style>
</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">侧面选项卡-div模式</h1>
</header>
<div class="mui-content mui-row mui-fullscreen">
<div class="mui-col-xs-3 ">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<a class="mui-control-item" href="#content1">选项1</a>
<a class="mui-control-item" href="#content2">选项2</a>
<a class="mui-control-item" href="#content3">选项3</a>
<a class="mui-control-item" href="#content4">选项4</a>
</div>
</div>
<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
<div id="content1" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第1个选项卡子项-1</li>
<li class="mui-table-view-cell">第1个选项卡子项-2</li>
<li class="mui-table-view-cell">第1个选项卡子项-3</li>
<li class="mui-table-view-cell">第1个选项卡子项-4</li>
<li class="mui-table-view-cell">第1个选项卡子项-5</li>
<li class="mui-table-view-cell">第1个选项卡子项-6</li>
<li class="mui-table-view-cell">第1个选项卡子项-7</li>
<li class="mui-table-view-cell">第1个选项卡子项-8</li>
<li class="mui-table-view-cell">第1个选项卡子项-9</li>
<li class="mui-table-view-cell">第1个选项卡子项-10</li>
<li class="mui-table-view-cell">第1个选项卡子项-11</li>
<li class="mui-table-view-cell">第1个选项卡子项-12</li>
<li class="mui-table-view-cell">第1个选项卡子项-13</li>
<li class="mui-table-view-cell">第1个选项卡子项-14</li>
<li class="mui-table-view-cell">第1个选项卡子项-15</li>
<li class="mui-table-view-cell">第1个选项卡子项-16</li>
<li class="mui-table-view-cell">第1个选项卡子项-17</li>
<li class="mui-table-view-cell">第1个选项卡子项-18</li>
<li class="mui-table-view-cell">第1个选项卡子项-19</li>
<li class="mui-table-view-cell">第1个选项卡子项-20</li>
</ul>
</div>
<div id="content2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2个选项卡子项-1</li>
<li class="mui-table-view-cell">第2个选项卡子项-2</li>
<li class="mui-table-view-cell">第2个选项卡子项-3</li>
<li class="mui-table-view-cell">第2个选项卡子项-4</li>
<li class="mui-table-view-cell">第2个选项卡子项-5</li>
<li class="mui-table-view-cell">第2个选项卡子项-6</li>
<li class="mui-table-view-cell">第2个选项卡子项-7</li>
<li class="mui-table-view-cell">第2个选项卡子项-8</li>
<li class="mui-table-view-cell">第2个选项卡子项-9</li>
<li class="mui-table-view-cell">第2个选项卡子项-10</li>
<li class="mui-table-view-cell">第2个选项卡子项-11</li>
<li class="mui-table-view-cell">第2个选项卡子项-12</li>
<li class="mui-table-view-cell">第2个选项卡子项-13</li>
<li class="mui-table-view-cell">第2个选项卡子项-14</li>
<li class="mui-table-view-cell">第2个选项卡子项-15</li>
<li class="mui-table-view-cell">第2个选项卡子项-16</li>
<li class="mui-table-view-cell">第2个选项卡子项-17</li>
<li class="mui-table-view-cell">第2个选项卡子项-18</li>
<li class="mui-table-view-cell">第2个选项卡子项-19</li>
<li class="mui-table-view-cell">第2个选项卡子项-20</li>
</ul>
</div>
<div id="content3" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第3个选项卡子项-1</li>
<li class="mui-table-view-cell">第3个选项卡子项-2</li>
<li class="mui-table-view-cell">第3个选项卡子项-3</li>
<li class="mui-table-view-cell">第3个选项卡子项-4</li>
<li class="mui-table-view-cell">第3个选项卡子项-5</li>
<li class="mui-table-view-cell">第3个选项卡子项-6</li>
<li class="mui-table-view-cell">第3个选项卡子项-7</li>
<li class="mui-table-view-cell">第3个选项卡子项-8</li>
<li class="mui-table-view-cell">第3个选项卡子项-9</li>
<li class="mui-table-view-cell">第3个选项卡子项-10</li>
<li class="mui-table-view-cell">第3个选项卡子项-11</li>
<li class="mui-table-view-cell">第3个选项卡子项-12</li>
<li class="mui-table-view-cell">第3个选项卡子项-13</li>
<li class="mui-table-view-cell">第3个选项卡子项-14</li>
<li class="mui-table-view-cell">第3个选项卡子项-15</li>
<li class="mui-table-view-cell">第3个选项卡子项-16</li>
<li class="mui-table-view-cell">第3个选项卡子项-17</li>
<li class="mui-table-view-cell">第3个选项卡子项-18</li>
<li class="mui-table-view-cell">第3个选项卡子项-19</li>
<li class="mui-table-view-cell">第3个选项卡子项-20</li>
</ul>
</div>
<div id="content4" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第4个选项卡子项-1</li>
<li class="mui-table-view-cell">第4个选项卡子项-2</li>
<li class="mui-table-view-cell">第4个选项卡子项-3</li>
<li class="mui-table-view-cell">第4个选项卡子项-4</li>
<li class="mui-table-view-cell">第4个选项卡子项-5</li>
<li class="mui-table-view-cell">第4个选项卡子项-6</li>
<li class="mui-table-view-cell">第4个选项卡子项-7</li>
<li class="mui-table-view-cell">第4个选项卡子项-8</li>
<li class="mui-table-view-cell">第4个选项卡子项-9</li>
<li class="mui-table-view-cell">第4个选项卡子项-10</li>
<li class="mui-table-view-cell">第4个选项卡子项-11</li>
<li class="mui-table-view-cell">第4个选项卡子项-12</li>
<li class="mui-table-view-cell">第4个选项卡子项-13</li>
<li class="mui-table-view-cell">第4个选项卡子项-14</li>
<li class="mui-table-view-cell">第4个选项卡子项-15</li>
<li class="mui-table-view-cell">第4个选项卡子项-16</li>
<li class="mui-table-view-cell">第4个选项卡子项-17</li>
<li class="mui-table-view-cell">第4个选项卡子项-18</li>
<li class="mui-table-view-cell">第4个选项卡子项-19</li>
<li class="mui-table-view-cell">第4个选项卡子项-20</li>
</ul>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script>
mui.init({
//swipeBack: true //启用右滑关闭功能
});
(function($) {
//阻尼系数
//var deceleration = mui.os.ios?0.003:0.0009;
// $('.mui-content').scroll({
// bounce: false,
// indicators: true, //是否显示滚动条
// deceleration:deceleration
// });
$.ready(function() {
//循环初始化所有上拉加载。
$.each(document.querySelectorAll('.mui-col-xs-9 .mui-control-content'), function(index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
up: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index, 20));
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
var createFragment = function(ul, index, count, reverse) {
var length = ul.querySelectorAll('li').length;
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
fragment.appendChild(li);
}
return fragment;
};
});
})(mui);
</script>
</body>
</html> 
jtshushu
往上拉加载最新的，往下拉加载历史，怎么不行
2016-12-20 16:08