iscroll 功能强大,也只能在手机下面用。pc只能模仿个差不多的东西。
不过iscroll的东西,只能在单独的页面好用,如果添加太多东西,得到的效果和付出的代价划不来,只能手动编写一个。支持手机pc,因为是纯jq,没有兼容问题
<div class='indexList'>
<!-- 数据集合 -->
</div>
<!-- 用于放置底部,当滚动条超过这个时,触发相关动作,实现拖动加载,手机本身有滚动特效,同样以滚动条滚动做为媒介 -->
<div id="gd_iscroll_bottom"
style="height: 25px; font-size: 16px; visibility: hidden; overflow: hidden; width: 100%; text-align: center;">
下拉加载更多</div>
//仿php时间函数
function time() {
return Math.floor(new Date().getTime() / 1000);
}
//分页的索引页面
var shop_page_index = 1;
//滚动的记录时间,用来识别滚动时间,当停止滚动时触发对应函数
var is_on_scroll_time = 0;
//加载数据已经结束
//当数据加载结束,不进行二次加载
var is_load_end = 0;
//用于触摸设备,判断是否触摸和离开,离开状态下才进行数据加载
var is_mobile_touch = false;
setInterval(function() {
//时间阀值,当滚动触发时,超过3秒,则表示用户停止滚动,触发对应的加载事件
if (!is_mobile_touch && is_on_scroll_time
&& is_on_scroll_time - time() <= 3) {
console.log('is stop');
is_on_scroll_time = 0;
$('#gd_iscroll_bottom').html('加载中...');
//停止动画链表执行
$('body').stop(true);
//调用目标地址加载数据
$.post('xxxxxx', {
page : shop_page_index
}, function(result) {
var htmlstr = '';
for (i = 0; i < result.length; i++) {
model = result[i];
//拼接数据
$('.indexList').append('xxx');
}
//当返回为空时,不进行数据触发和加载
if (result.length == 0) {
$('#gd_iscroll_bottom').html('暂无更多数据...');
$('body')
.animate(
{
scrollTop : $('#gd_iscroll_bottom')
.offset().top
- $(window).height()
}, 1200);
} else {
shop_page_index++;
}
//$('.indexList').append($('.indexList').html());
//$('body').animate({scrollTop:$('#gd_iscroll_bottom').offset().top-$(window).height()}, 1200);
}, 'json');
}
}, 1000);
$(document)
.ready(
function() {
$(window)
.scroll(
function() {
//滚动条超过底部加载条时,记录
if ($(window).height()
+ $(window).scrollTop() >= $(
'#gd_iscroll_bottom')
.offset().top
+ $('#gd_iscroll_bottom')
.height()) {
//记录当前滚动时间,用于判断用户是否停止鼠标滚动
is_on_scroll_time = time();
console
.log('gd event on bottom');
$('body').stop(true);
//$('body').animate({scrollTop:$('#gd_iscroll_bottom').offset().top-$(window).height()}, 800)
} else if ($(window).height()
+ $(window).scrollTop() < $(
'#gd_iscroll_bottom')
.offset().top) {
//当用户滚动到底部,又直接往上拖动时,停止相关触发,否则当上拉时,动画会自动往下拖动
is_on_scroll_time = 0;
//停止页面滚动特效
$('body').stop(true);
}
});
});
//手机触摸相关触发
function load() {
document.addEventListener('touchstart', touch, false);
document.addEventListener('touchmove', touch, false);
document.addEventListener('touchend', touch, false);
function touch(event) {
var event = event || window.event;
switch (event.type) {
case "touchstart"://用户触摸中
is_mobile_touch = true;
break;
case "touchend":
//用户释放
is_mobile_touch = false;
break;
case "touchmove":
//event.preventDefault();
break;
}
}
}
try {
window.addEventListener('load', load, false);
} catch (e) {
//不是手机
}