html5下划手机屏幕,实现数据加载

本文介绍了一种使用JavaScript实现的无限滚动加载技术。该技术通过监听窗口滚动事件,并判断是否达到页面底部来决定是否加载更多数据。文章详细展示了如何通过比较滚动条位置与页面高度来触发加载,以及如何处理数据加载完毕后的提示。

1首先页面绑定事件   $(window).bind('scroll',scrollbind);

2是否是到了底层需要加载的判断 

 function scrollbind () {


            var newtab= $(".record-tab a").eq(parseInt($('#hidcurrenttab').val()));
            var record=$('.record-list').eq(parseInt($('#hidcurrenttab').val()));
             


            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if(scrollTop + windowHeight < scrollHeight){
                return false;
            }; 


            if (parseInt(newtab.attr('data-page'))>=parseInt(newtab.attr('data-total')) && parseInt( newtab.attr('data-page'))!=0) {
                var record=$('.record-list').eq(parseInt($('#hidcurrenttab').val()));
                if (record.find('li:contains(没有记录了)').length==1) {
                    return false;
                }
                var norecorder='<li style="text-align:center;"><p>没有记录了</p></li>';
                record.find('ul').append(norecorder);
                return false;
            }else{
                getlist((parseInt( newtab.attr('data-page'))+1));//加载数据
            }
        };

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值