H5手机页面加入滑动分页后，上拉滑动不了
21:01:35&&&来源：&&&评论： 点击：
当手机页面是静态页面时，页面可以上拉滑动，但是在页面某个模块加了滑动分页后，页面不能向上滑动，这应该怎么解决啊，求各位大神指教！！！
频道总排行
频道本月排行pc端分页，大多是点击页码或者下一页来翻页，这种方式不适合移动端。移动端手指滑动操作方便，就产生了上滑下载分页的交互模式，本文介绍这种方法的实现。
思路：绑定页面滚动事件-&监听页面滑动底部-&ajax请求下一页数据-&组装dom插入页面。
主要功能代码：
监听滑动事件，判断如果滑动底部触发请求下一页面方法。
1 $(window).scroll(function () {
//已经滚动到上面的页面高度
var scrollTop = $(this).scrollTop();
//页面高度
var scrollHeight = $(document).height();
//浏览器窗口高度
var windowHeight = $(this).height();
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
if (scrollTop + windowHeight == scrollHeight) {
dragThis.insertDom();
具体代码和示例前往。
阅读(...) 评论()　　代码来源：github上的dropload项目。
　　dropload.js提供了最基本的上拉翻页，下拉刷新功能。对于由服务端一次返回所有数据的情况基本通用。
　　但是，需求往往不是服务端一次性返回所有数据，往往还要支持服务端分页，搜索，排序，多条件筛选等功能。（比较类似美团美食的界面）
三. 解决方案。
　　改进1：由于有分页，搜索，排序，多条件筛选功能，可能都不需要上拉，进到页面就没有数据。
　　例如：搜索一个服务端不存在的名字。
　　所以，添加接口设置setHasData。
MyDropLoad.prototype.setHasData = function(ishasData) {
var me = this;
if (ishasData) {
me.isData = true;
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
me.isData = false;
me.$domDown.html(me.opts.domDown.domNoData);
fnRecoverContentHeight(me);
　　改进2：由以上问题还引发了一个bug，选择不同的筛选条件，然后上拉加载更多，此时没有反应了。
　　原因较复杂，举例说明：选择不同的筛选条件，数据量不一样，如果不执行resetload，那么页面的的上拉计算距离就存在问题。
　　　　1. 只要发API到服务端，无论返回成功失败，都必须执行resetload，成功时需要在加载完全部新增的数据后resetload。
　　　　2.&更改resetload如下，添加调用计算屏幕尺寸的方法。
MyDropLoad.prototype.resetload = function() {
var me = this;
if (me.direction == 'down' && me.upInsertDOM) {
me.$domUp.css({ 'height': '0' }).on('webkitTransitionEnd mozTransitionEnd transitionend', function() {
me.loading = false;
me.upInsertDOM = false;
$(this).remove();
fnRecoverContentHeight(me);
} else if (me.direction == 'up') {
me.loading = false;
if (me.isData) {
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
me.$domDown.html(me.opts.domDown.domNoData);
&　　3. 解决以上两个问题，基本解决了90%的问题，还有一个是setHasData(false)之后的处理。（假设每页的count时20条）
　　bug: 在筛序条件1：返回20条数据，上拉加载更多返回10条数据，此时设置setHasData(false)。选择筛选条件2，返回20条数据，上拉加载，你会惊奇的发现拉不动了。
　　why:&setHasData(false)之后状态还停留在没有更多数据的状态。此时应该锁定了上拉加载，更改筛选条件后，没有解除锁定，所以不能上拉加载了。
& & &解决方法：每次更改搜索条件，筛选条件，排序等时，都需要设置setHasData(true)。
四. 调用方法
　　整体页面逻辑较复杂。这里在整体解释一遍。
　　1. 选择要上拉加载的DIV，添加调用方法。
　　　　注意事项：
　　　　（1）记得保存返回对象。
　　　　（2）LoadDownFn时上拉加载后的回调，这里自己要处理的逻辑。我这里时翻页发API，API参数中offset加20，然后发API。
　　　　（3）无论API返回失败成功，都必须resetload。
　　　　　　这里强调：
　　　　　　　　fetchData函数调用发API，失败或者成功都必须self.moreFund.resetload()。
　　　　　　　　并且失败时直接调用self.moreFund.resetload()即可。成功时要在新的数据返回后，要先用JS动态加载HTML，加载完成后在执行self.moreFund.resetload()。
self.moreFund = $('#table-fundlist').dropload({
scrollArea: window,
domDown: {
domClass: 'dropload-down',
domRefresh: '&div class="dropload-refresh"&&img class="drop-up-icon" src="images/dropload_up.png"&&span&上拉加载更多&/span&&/div&',
domLoad: '&div class="dropload-load"&&img class="loading-icon" src="images/droploading.gif"&&/div&',
domNoData: ''
loadDownFn: function() {
self.apiParams.offset += 20;
self.fetchData(true);
　　2. setHasData详解
　　　　（1）什么时候需要设置true。
　　　　　　当非翻页API触发之前。即选择新的筛选条件，选择新的搜索字段，选择新的排序字段。这个时候必须setHasData(true)。
this.moreFund.setHasData(true);
　　　　（2）什么时候设置false。
　　　　　　服务端返回数据后，比较服务端返回的条目数与API发送的条目数是否一致，不一致设置setHasData(false)。
if (data.length & this.apiParams.count){
this.moreFund.setHasData(false);
this.moreFund.lock();
　　3. lock与unlock详解
　　　　（1）设么时候设置lock。
　　　　　　服务端返回数据后，比较服务端返回的条目数与API发送的条目数是否一致，不一致设置lock()。
　　　　　　当前页面状态不需要上拉加载时需要设置lock()。例如：在搜索框输入的状态。
　　　　（2）什么时候设置unlock。
　　　　　　只有一个地方需要调用。发送API之前设置unlock。
if (self.moreFund) {
self.moreFund.unlock();
五. JS和CSS源代码
(function($) {
'use strict';
var $win = $(win);
var $doc = $(doc);
$.fn.dropload = function(options) {
return new MyDropLoad(this, options);
var MyDropLoad = function(element, options) {
var me = this;
me.$element = $(element);
me.upInsertDOM = false;
me.loading = false;
me.isLockUp = false;
me.isLockDown = false;
me.isData = true;
me._scrollTop = 0;
me.init(options);
MyDropLoad.prototype.init = function(options) {
var me = this;
me.opts = $.extend({}, {
scrollArea: me.$element,
domClass: 'dropload-up',
domRefresh: '&div class="dropload-refresh"&&img class="drop-down-icon" src="../images/dropload_down.png"&&span&下拉刷新&/span&&/div&',
domUpdate: '&div class="dropload-update"&&img class="drop-up-icon" src="../images/dropload_up.png"&&span&释放更新&/span&&/div&',
domLoad: '&div class="dropload-load"&&img class="loading-icon" src="../images/droploading.gif"&&/div&'
domDown: {
domClass: 'dropload-down',
domRefresh: '&div class="dropload-refresh"&&img class="drop-up-icon" src="../images/dropload_up.png"&&span&上拉加载更多&/span&&/div&',
domLoad: '&div class="dropload-load"&&img class="loading-icon" src="../images/droploading.gif"&&/div&',
domNoData: ''
//domNoData
: '&div class="dropload-noData"&&span&暂无数据&/span&&/div&'
distance: 50, // 拉动距离
threshold: '', // 提前加载距离
loadUpFn: '', // 上方function
loadDownFn: '' // 下方function
}, options);
if (me.opts.loadDownFn != '') {
me.$element.append('&div class="' + me.opts.domDown.domClass + '"&' + me.opts.domDown.domRefresh + '&/div&');
me.$domDown = $('.' + me.opts.domDown.domClass);
if (me.opts.scrollArea == win) {
me.$scrollArea = $
me._scrollContentHeight = $doc.height();
me._scrollWindowHeight = doc.documentElement.clientH
me.$scrollArea = me.opts.scrollA
me._scrollContentHeight = me.$element[0].scrollH
me._scrollWindowHeight = me.$element.height();
$win.on('resize', function() {
if (me.opts.scrollArea == win) {
me._scrollWindowHeight = win.innerH
me._scrollWindowHeight = me.$element.height();
me.$element.on('touchstart', function(e) {
if (!me.loading) {
fnTouches(e);
fnTouchstart(e, me);
me.$element.on('touchmove', function(e) {
if (!me.loading) {
fnTouches(e, me);
fnTouchmove(e, me);
me.$element.on('touchend', function() {
if (!me.loading) {
fnTouchend(me);
me.$scrollArea.on('scroll', function() {
me._scrollTop = me.$scrollArea.scrollTop();
fnRecoverContentHeight(me)
if (me.opts.threshold === '') {
me._threshold = Math.floor(me.$domDown.height() * 1 / 3);
me._threshold = me.opts.
if (me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && me._threshold != 0 && (me._scrollContentHeight - me._threshold) &= (me._scrollWindowHeight + me._scrollTop)) {
fnLoadDown();
function fnLoadDown() {
me.direction = 'up';
me.$domDown.html(me.opts.domDown.domLoad);
me.loading = true;
me.opts.loadDownFn(me);
function fnTouches(e) {
if (!e.touches) {
e.touches = e.originalEvent.
function fnTouchstart(e, me) {
me._startY = e.touches[0].pageY;
me.touchScrollTop = me.$scrollArea.scrollTop();
function fnTouchmove(e, me) {
me._curY = e.touches[0].pageY;
me._moveY = me._curY - me._startY;
if (me._moveY & 0) {
me.direction = 'down';
} else if (me._moveY & 0) {
me.direction = 'up';
var _absMoveY = Math.abs(me._moveY);
if (me.opts.loadUpFn != '' && me.touchScrollTop &= 0 && me.direction == 'down' && !me.isLockUp) {
e.preventDefault();
me.$domUp = $('.' + me.opts.domUp.domClass);
if (!me.upInsertDOM) {
me.$element.prepend('&div class="' + me.opts.domUp.domClass + '"&&/div&');
me.upInsertDOM = true;
fnTransition(me.$domUp, 0);
if (_absMoveY &= me.opts.distance) {
me._offsetY = _absMoveY;
me.$domUp.html(me.opts.domUp.domRefresh);
} else if (_absMoveY & me.opts.distance && _absMoveY &= me.opts.distance * 2) {
me._offsetY = me.opts.distance + (_absMoveY - me.opts.distance) * 0.5;
me.$domUp.html(me.opts.domUp.domUpdate);
me._offsetY = me.opts.distance + me.opts.distance * 0.5 + (_absMoveY - me.opts.distance * 2) * 0.2;
me.$domUp.css({ 'height': me._offsetY });
// touchend
function fnTouchend(me) {
var _absMoveY = Math.abs(me._moveY);
if (me.opts.loadUpFn != '' && me.touchScrollTop &= 0 && me.direction == 'down' && !me.isLockUp) {
fnTransition(me.$domUp, 300);
if (_absMoveY & me.opts.distance) {
me.$domUp.css({ 'height': me.$domUp.children().height() });
me.$domUp.html(me.opts.domUp.domLoad);
me.loading = true;
me.opts.loadUpFn(me);
me.$domUp.css({ 'height': '0' }).on('webkitTransitionEnd transitionend', function() {
me.upInsertDOM = false;
$(this).remove();
me._moveY = 0;
// 重新获取文档高度
function fnRecoverContentHeight(me) {
if (me.opts.scrollArea == win) {
me._scrollContentHeight = $doc.height();
me._scrollContentHeight = me.$element[0].scrollH
MyDropLoad.prototype.lock = function(direction) {
var me = this;
if (direction === undefined) {
if (me.direction == 'up') {
me.isLockDown = true;
} else if (me.direction == 'down') {
me.isLockUp = true;
me.isLockUp = true;
me.isLockDown = true;
} else if (direction == 'up') {
me.isLockUp = true;
} else if (direction == 'down') {
me.isLockDown = true;
MyDropLoad.prototype.unlock = function() {
var me = this;
me.isLockUp = false;
me.isLockDown = false;
MyDropLoad.prototype.setHasData = function(ishasData) {
var me = this;
if (ishasData) {
me.isData = true;
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
me.isData = false;
me.$domDown.html(me.opts.domDown.domNoData);
fnRecoverContentHeight(me);
MyDropLoad.prototype.resetload = function() {
var me = this;
if (me.direction == 'down' && me.upInsertDOM) {
me.$domUp.css({ 'height': '0' }).on('webkitTransitionEnd mozTransitionEnd transitionend', function() {
me.loading = false;
me.upInsertDOM = false;
$(this).remove();
fnRecoverContentHeight(me);
} else if (me.direction == 'up') {
me.loading = false;
if (me.isData) {
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
me.$domDown.html(me.opts.domDown.domNoData);
function fnTransition(dom, num) {
'-webkit-transition': 'all ' + num + 'ms',
'transition': 'all ' + num + 'ms'
})(window.Zepto || window.jQuery);
.dropload-up,
.dropload-down {
background-color: #F0EFF5;
position: relative;
height: 0;
overflow: hidden;
.dropload-down {
height: 50px;
border-top: 1px solid #e5e5e5;
.dropload-refresh .drop-up-icon,
.dropload-refresh .drop-down-icon,
.dropload-update .drop-up-icon,
.dropload-update .drop-down-icon {
vertical-align: text-bottom;
margin-right: 3px;
height: 16px;
width: 12px;
.dropload-load .loading-icon {
vertical-align: middle;
height: 20px;
width: 20px;
.dropload-refresh span,
.dropload-update span {
vertical-align: middle;
line-height: 18px;
font-size: 16px;
color: #585858;
.dropload-noData {
border-bottom: 1px solid #e5e5e5;
background-color: #FFFFFF;
.dropload-noData span {
line-height: 18px;
font-size: 14px;
color: #999999;
.dropload-refresh,
.dropload-update,
.dropload-load,
.dropload-noData {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
line-height: 50px;
text-align: center;
.dropload-down .dropload-refresh,
.dropload-down .dropload-update,
.dropload-down .dropload-load {
bottom: auto;
阅读(...) 评论()2015年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。