码迷,mamicode.com
首页 > 其他好文 > 详细

不依赖任何插件的下拉加载

时间:2016-08-18 17:16:31      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:

HTML:

1 <ul id="loading">
2   <li>
3         ...
4    </li>   
5 </ul> 
6 <div class="pullUpLabel">
7     <span>点击加载</span>
8 </div>   

其中ul#loading为容器。

CSS:

/*下拉加载*/
.pullUpLabel {
    text-align: center; line-height: 60px; font-size: .22rem;
}
.pullUpLabel span {
    padding: 0 25px; background: no-repeat left center;
}
.pullUpLabel span.loading {
    background-image:url(../images/loading.gif);
}

JS:

//下拉加载
    $(function(){
        var totalHeight = 0;
        var wHeight = $(window).height();
        $(window).scroll(function(){
            var sTop = $(window).scrollTop();
            var dHeight = $(document).height();
            totalHeight = parseFloat(sTop) + parseFloat(wHeight);
            if( dHeight == totalHeight) {
                loading();
            }
        });
        $(‘.pullUpLabel‘).click(function(){
            loading();
        });
        function loading(){
            //等待加载
            $(‘.pullUpLabel span‘).addClass(‘loading‘).html(‘加载中...‘);
            
            for(var i=0; i<3; i++) {
                /*加载3条数据*/
                $(‘#loading‘).append(‘<li>...</li>‘);
            }    
            //加载完成
            $(‘.pullUpLabel span‘).removeClass(‘loading‘).html(‘点击加载‘);
    
        }
    })

每当滚动条滚到最底部或者点击pullUpLabel时,加载3条数据。

 

不依赖任何插件的下拉加载

标签:

原文地址:http://www.cnblogs.com/shifan/p/5784628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!