欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-12 17:10:06
顶顶顶顶顶顶顶顶顶顶 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异步处理数据,涉及到一些前端的加载效果延时等,我这就不详细的列了。


    作者:潇湘一梦