zoukankan      html  css  js  c++  java
  • jQuery-Ajax H5无刷新分页

    //滚动条滚动的时候
        $(window).scroll(function(){
            var now = $('#page').val();
            // scrollTop 滚动条滚动时,距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // windowHeight 可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            // scrollHeight 滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 滚动条到底部的条件
            if (scrollTop + windowHeight + 1 == scrollHeight) {
                now++;
                $.ajax({
                    type: 'GET',
                    cache: false,
                    dataType: 'JSON',
                    url: "/url/list/?page="+now,
                    success:function(result){
                        if (result.status == 1) {
                            var html = '';
                            $.each(result.data.list, function(i, obj) {
                                html += '<dl><a href="javascript:void(0);" onclick="detail('+obj.id+')"><dd>';
                                html += '<p>'+obj.title+'</p>';
                                html += '<span>'+obj.number+'</span></dd>';
                                html += '<dt><img src="'+obj.pic+'" alt=""></dt></a></dl>';
                            });
                            $(".class").append(html);
                            $("#page").attr('value', now);
                        }else {
                            alert(result.msg);
                        }
                    }
                });
            }
        });
  • 相关阅读:
    8086汇编中的逻辑地址与物理地址转换
    wepy开发踩坑记录
    cordova开发的坑
    express转发请求
    Hybrid app(cordova) 环境配置记录
    laravel-mix 热重载404的问题
    练习
    git 使用记录
    Vue全家桶开发笔记
    微信小程序开发踩坑记录
  • 原文地址:https://www.cnblogs.com/soaring-sun/p/15099591.html
Copyright © 2011-2022 走看看