手机移动端h5页面滑动到底部时ajax方式加载数据

手机移动端访问移动站点时，我们经常会用到滑动到底部，触发加载数据。下面我们来介绍下解决方案：

1、首先我们要判断已经滑动到屏幕的底部位置，如下代码：

 //scroll
    $(document).scroll(function () {
        //滚动条滑动的时候获取滚动条距离顶部的距离
        var scroll = $(document).scrollTop();
        //屏幕的高度
        var client = $(window).height();
        var h = $(document).height();
        var flag = true;
        if (h <= scroll + client) { // 到达底部时,加载新内容
            if (flag == false) {
                return;
            }
            $(".loading").show();
            $('.loading p').text('数据加载中...');
            SearchData();
        }
    });

2、到达我们需求的某个位置时，此时触发查询数据方法：

 // 查询

    function SearchData() {
        var value = {param1:'',p2:''...};
        $.post("/List/GetList", value, function (data) {
            if (eval(data) == undefined || eval(data) == '') {
                $('.loading p').text('已拉不出东西了...');
                var timeout = setTimeout(function () {
                    $(".loading").hide();
                }, 1000);
            }
            else {
                $("#mListImg").append(eval(data));
                $("#PageIndex").val(parseInt($("#PageIndex").val()) + 1);
                $(".loading").hide();
            }
        });
    }

3、整个思路其实很简单，分两步走，第一步就是判断已经滑动到需求的位置，第二步就是查询数据，ajax异步处理数据，涉及到一些前端的加载效果延时等，我这就不详细的列了。

    作者：潇湘一梦