关于监听滚动事件加载更多的代码

$(".rankDetail").scroll(function(){ //rankDetail是大容器的class
        var scrollHeight = $(this).scrollTop();
        var rankListCount = $(".rankList").length;  //rankList是容器中的一个项目,类似于一个li
        var rankListHeight = $(".rankList").height();
        var rankListTotalHeight = rankListHeight * rankListCount;
        var rankDetailHeight = $(".rankDetail").height();
        var diffHeight = rankListTotalHeight - rankDetailHeight - scrollHeight;
        //可以加载新数据
        if(diffHeight >=0 && diffHeight < rankListHeight && isLoad == false){
            var pageNum = Math.ceil(rankListCount / pageSize) + 1;//pageSize是加载一次数据总量
            getName(pageNum);  //getName是加载程序,pageNum是加载是所传的参数
        }
    })

还有另外一个问题就是,举个例子,单页面上有一个div,页面刷新的时候div的display为none,触发某个事件的时候div显示出来,在同一个项目的另外一个页面里面,点击某个button时跳转到第一个页面,同时希望这个页面的隐藏div处于打开状态,怎么办呢?    给第二个页面跳转时设置location.href="/firstPage?title=1"      此时firstPage后面的东西是不影响页面跳转的,页面会跳转到第一个界面,然后

if(location.href.indexOf("title=1") !== -1){  //也就证明此时页面是由第二个页面跳转过来的
        divShow();  //将你要显示的div显示出来
    }

最后一个问题是动态添加的div的点击问题:

点击某个button向页面中添加一个div  ,如果想点击新添加的div里面的某个div怎么办?

如果你直接获取第二个div,然后添加点击事件,这样的程序是没法点击的:参考下面代码添加点击事件:

$(".nameInput").on("click",".moreName",function(){  //moreName是第二个div,nameInput是它的爷爷辈
元素,也就是页面第一次加载就存在的元素,不是动态添加的;
        var title=$(this).attr("title");
        if(title == 1){  //添加title可以知道你这个元素是否被点击过,方面进行其他操作,注意这个用法非常实用
            $(".nameInput").append(html);//此时的html是一个模版,按需求定义
            $(this).attr("src","./img/delete.png");
            $(this).attr("title","2");
        }else{
            $(this).parent().remove();
        }
    });

输入框的验证问题:

$(‘.phone‘).blur(function(){
         var $parent = $(this).parent();
         var value=$(this).val();
         if(this.value==""){
             var errorMsg = ‘留下您的电话‘;
            $parent.append(‘<small class="formtips">‘+‘*‘+errorMsg+‘</small>‘);
         }
    }).keyup(function(){
        $(this).triggerHandler("blur");
    });

blur代表失去焦点时的事件,适用与不使用插件的验证方式

时间: 2024-07-28 20:03:28

关于监听滚动事件加载更多的代码的相关文章

vue监听滚动事件 实现动态锚点

前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用 <a href="#i

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

vue监听滚动事件 实现某元素吸顶或者固定位置显示

https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () { var

vue监听滚动事件,实现滚动监听(scroll滚动)

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="

VUE 实现监听滚动事件,实现数据懒加载

methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop } else if (document.body) { scrollTop = document.body.scrollTop } retu

jquery监听滚动事件获取scrollTop

css: .anchor_reached { color: #0073eb; } jquery: $(window).scroll(function(event){ $(".anchor_directory").siblings().each(function(){ var this_top = $(this).attr("data-top"); if(($('body').scrollTop()) >= this_top){ $(this).addClass

JQuery ajax 滚动底部加载更多

<%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ Import Namespace="System.Net" %> <%@ Import Namespace="System.Data.SqlClient" %> <!DOCTYPE html> <script runat="

数据加载更多js代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <button value="查看更多">查看更多</button> </div> <di

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=