移动端ajax,手机移动端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异步处理数据，涉及到一些前端的加载效果延时等，我这就不详细的列了。

作者：潇湘一梦