zoukankan      html  css  js  c++  java
  • pc滚动到底部加载

    滚屏自动加载

    $(function() {  
                    var winH = $(window).height(); //页面可视区域高度  
                    var i = 1;  
                    $(window).scroll(function() {  
                        var pageH = $(document.body).height();  
                        var scrollT = $(window).scrollTop(); //滚动条top  
                        var aa = (pageH - winH - scrollT) / winH;  
                        if (aa < 0.02) {  
                            $.getJSON("result.php", {page: i}, function(json) {  
                                if (json) {  
                                    var str = "";  
                                    $.each(json, function(index, array) {  
                                        var str = "<div class="single_item"><div class="element_head">";  
                                        var str = str + "<div class="date">" + array['date'] + "</div>";  
                                        var str = str + "<div class="author">" + array['author'] + "</div>";  
                                        var str = str + "</div><div class="content">" + array['content'] + "</div></div>";  
                                        $("#container").append(str);  
                                    });  
                                    i++;  
                                } else {  
                                    $(".nodata").show().html("别滚动了,已经到底了。。。");  
                                    return false;  
                                }  
                            });  
                        }  
                    });  
                });  

    2.

    // 加载更多评价的函数
    function loadMore(){
        $(".discussList").append('<div class=loading style=display:none;text-align:center;height:30px;line-height:30px;background:#fff;>加载中...</div>');//插入加载中的提示框
        var stop = true; //默认停止加载
        // 页数
        var page = 0;
        // 每页展示5个
        var size = 5;
        var bottomH=50;//距离底部多少像素开始加载
        $(window).scroll(function() {
    
            totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()+bottomH);
            if ($(document).height() <= totalheight) {
                if (stop == true) {
                    stop = false;
                    $(".loading").show();//显示加载中提示
                    $.ajax({
                        url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                        type: 'GET',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(data) {
                            var dateLength = data.length; //数据长度
                            if (dateLength > 0) {
                                $(".loading").before('<div class=list><p class=listP1> <strong>132***313</strong> <img src=../img/xing3.png alt> <img src=../img/xing3.png alt> <img src=../img/xing3.png alt> <img src=../img/xing3.png alt><img src=../img/xing4.png alt><span>2017-12-26 13:20</span></p><p class=listP2>好吃,一直吃他家的</p></div>')
                                $('.loading').hide();
                                page++;
                                stop = true;
                            } else {
                                $(".loading").text("暂无数据")
                            }
                        },
                        error: function(xhr, type) {
                            $(".loading").hide();
                            alert("ajax error!");
                        }
                    });
                }
    
            }
        });
    }
  • 相关阅读:
    Linux/shell: remove adjacent similar patterns
    Calculate difference between consecutive data points in a column from a file
    awk
    自定义Cordova插件(基础篇)
    npm init 命令生成package.json文件
    自定义Cordova插件详解
    Android 回退键监听
    Cordova结合Vue学习Camera
    解决悬浮的<header>、<footer>遮挡内容的处理技巧
    npm 是干什么的
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/6678035.html
Copyright © 2011-2022 走看看