手机移动端h5页面滑动到底部时ajax方式加载数据
程序员文章站
2022-08-11 15:49:14
顶顶顶顶顶顶顶顶顶顶 class ShoppingList extends React.Component { render() { return ( Shopping List for {this.props.name} Instagram WhatsApp Oculus ... ......
手机移动端访问移动站点时,我们经常会用到滑动到底部,触发加载数据。下面我们来介绍下解决方案:
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异步处理数据,涉及到一些前端的加载效果延时等,我这就不详细的列了。
作者:潇湘一梦