javascript - 想问一下，有没有谁写过移动端滑动到页面底部自动ajax加载更多列表的js，这个怎么处理的？

Question

手机端查看页面列表滑动到底部的时候会加载更多，有什么好用的插件还是大家原生js写的

Answer 1

你可以看看iscroll，这个库在移动端页面中广泛使用。上拉/下拉后刷新/加载更多demo。

Answer 2

jq的简单实现

$(document).ready(function() {
    var $loading = $("<p class='loading'><p>Loading more items&hellip;</p></p>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});

Answer 3

试着讲下原理，获取window的scrollTop，获取window的height，获取document的height，判断前两者加起来的高度与文档长度的大小，如果大于或等于，则加载

Answer 4

用iScroll是最好的选择。移动端无法正确的获取document.documentElement.scrollTop这些属性（可以用chrome调试工具测试），而iScroll里面封装一些方法来获取此类属性。

Answer 5

window.addEventListener('scroll', function() {
  var bodyRect = getRect(document.body);
  if (bodyRect.isBottom) ajaxLoad();
});

function ajaxLoad() {
  console.log(23333);
}

function getRect(ele) {
  var inHeight = window.innerHeight,
    rect = ele.getBoundingClientRect();

  rect.isVisible = rect.top - inHeight < 0; // 是否在可视区域
  rect.isBottom = rect.bottom - inHeight <= 0;
  return rect;
}

Answer 6

    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(window).height();
        
        if (scrollTop + windowHeight == scrollHeight) {
            if(lock){
                console.log('没有更多数据');
                return false;
            }
            lock = true ;
            $.ajax({
                type:'get',
                url:'&start='+start+'&offset='+offset,
                data:'',
                success:function(a){
                    if(a.length > 0){
                        for (var i = 0; i < a.length; i++) {
                            html += '<li data-id="' + a[i].tid + '">';
                            html += '<p class="img">';
                            html += '<img src="images/default-358-358.png" src="' + a[i].attachment + '">';
                            html += '</p>';
                            html += '</li>';
                        }
                    $('.picture-list').append(html);
                    //图片懒加载
                    $.imgLazy({viewport: true});
                    $('img:gt('+(start-1)+')').each(function(index){
                        $(this).bind('load',function(){
                            if($(this).width() > $(this).height()){
                                $(this).css({'height':liHeight,'width':'auto'})
                            }else{
                                $(this).css({'width':liWidth,'height':'auto'})
                            }
                        }).bind('error',function(){
                        //图片加载错误，加入错误处理

                        })
                    })
                    start += offset;
                    html = '';
                    lock = false;
                }else{
                    tips('没有更多数据', 1500);
                }
            },
            error:function(a){
                tips('加载失败', 1500);
            },
            dataType:'json'
            });
        }
    });