zoukankan      html  css  js  c++  java
  • 如何实现下拉页面到底自动加载新内容

    //分页
                $(window).scroll(function(){
                    var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
                    totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
                    if($(document).height() <= totalheight  && pageindex != pagecount) {
                        pageindex++;
                        Search(pageindex);
                    }
                });

     话不多说直接上代码。。

    第二次看这个文章必须加上的话:

    真的太傻了,很多事情都没好好弄清楚,先说一下原理:

    第一是加载到底部的时候会加载内容,所以要判断的是是否加载到底部了还有是否是页数内

    第二是上面那些height。。其实我一开始也不知道简单复制过来就用了发现能行也没有去看这些是什么高度,而且还发了一篇博客真是惭愧啊直到今天发现不滚动了才仔细看了一下(打脸一下,今后学习不能这样!)

    scrolltop是元素(这里是页面)加载到现在滚动条顶部高度

    $(window).height()是这个当前这个页面的高度

    $(document).height()是整个页面的高度

    最后我也把我的方法修改成了:

    //分页
            $(window).scroll(function () {
                var srollPos = $(window).scrollTop()+0.5;    //滚动条距顶部距离(页面超出窗口的高度)
                if (srollPos>=($(document).height()-$(window).height()) && pageindex != pagecount) {
                    pageindex++;
                    Search(pageindex);
                }
            });

    有一个加0.5的步骤 :是因为我发现好像不可能让scrollpos完全等于那个高度是不是,所以要加上一点数据才能触发这个判断,这一块我也不太清楚,不知道说的对不对,希望知道的大神能在评论里解答一下

    最后很感谢  http://www.cnblogs.com/piuba/archive/2013/01/06/2847295.html 这篇博文 是他让我弄清楚了各种高度的解释 真的还需要多学习 不能再犯这种错误了  自己学习的心太浮躁了真的不应该 今天优化从前的代码才发现这么多问题 真的太次了 就这样

    还有自己的梦想 要怎么实现啊!必须要改!!!!!!!

    pagecount为页面ajax传来的页数

    pageindex在执行每次需要重新加载数据时赋1

    Search事件为根据第几页加载相应数据然后返回给页面显示的函数

  • 相关阅读:
    sqli-libs(38-41(堆叠注入)关)
    Vue 短信验证码逻辑
    promise(二)
    js类型转换
    微信小程序的组件传值
    微信小程序首页跳转详情页
    微信小程序的事件绑定
    微信小程序简介
    webpack4入门教程十分钟上手指南
    Vue 全局注册组件和局部注册组件
  • 原文地址:https://www.cnblogs.com/junshijie/p/5973925.html
Copyright © 2011-2022 走看看