首页 > 编程语言 >手机直播源码,JS实现页面下拉加载数据操作

手机直播源码,JS实现页面下拉加载数据操作

时间:2023-04-13 14:11:45浏览次数:45  
标签:function JS 源码 timers var 操作 page 加载

手机直播源码,JS实现页面下拉加载数据操作

主要是在id="ph"的div内加载数据:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script src="js/test.js?v=<?php echo($_Version_); ?>"></script>
</head>
<body>
<div id="ph" align="center">
<!-- 这里是加载的内容区域-->
</div>
<div align="center">
    <img id="img_load" src="http://www.lkhk.life/images/loading.svg" width="60" style="display: none">
</div>
</body>
</html>
 

js代码功能如下:

 


var num_pages = 50;       //总页数,也是拉下加载的次数
var current_page = 1;    //当前页数,不能超过总页数
var timers = null;      //定义一个定时器
var srcoll_flag = true; // 定义一个开关,等会用来控制多次触发
//初始化页面,页面第一次加载时或者刷新时会执行
window.onload=function(){
    page_loadmore(current_page);//默认加载一次图片,这段代码可以不要
};
//监测下拉操作,执行拉下函数加载数据
$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();        //浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)
    var scrollHeight = $(document).height();    //整个文档高度
    var windowHeight = $(this).height();        //浏览器可视窗口高度
    if (scrollTop + windowHeight + 60 >= scrollHeight) {
        // 此处是滚动条距离底部60px时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
        if(srcoll_flag == true){    //检测下拉开关是否打开状态,如果是则执行下拉操作
            srcoll_flag = false;    //关闭下拉开关
            //***********可以定义自己的拉下操作***************
            if(current_page <= num_pages){  //如果不是最后一页,则执行下拉参数
                $("#img_load").css('display','block'); //显示loading图标提醒加载动作
                clearTimeout(timers);
                timers = setTimeout(function(){
                    page_loadmore();// 发现拉下操作,执行下拉函数
                },500);
            }
            //*********************************************
        }
    }
});
//加载数据函数
function page_loadmore() {
    $("#img_load").css('display','none'); //隐藏加载图标,开始加载数据
    //***********可以修改为自己的下拉操作函数************
    $.getJSON("http://lkhk.life/JBRH/mm.php?jsoncallback=?",{nums:3,sid:Math.random()},function (json) {
        for(i in json){
            $("#ph").append("<img width='750' src='"+json[i].imagepath+"'><br><p>");
        }
    });
    current_page++;
    //***********************************************
    clearTimeout(timers); //先清除定时器。执行
    timers = setTimeout(function(){
        srcoll_flag = true;
    },1000);    //1秒后再打开下拉开关,防止多次操作,很重要
}

 

 以上就是手机直播源码,JS实现页面下拉加载数据操作, 更多内容欢迎关注之后的文章

 

标签:function,JS,源码,timers,var,操作,page,加载
From: https://www.cnblogs.com/yunbaomengnan/p/17314605.html

相关文章

  • js注入cookie不生效的情况
    场景直接使用js注入cookie发现不生效,其实只设置了key和values值,没有注意其他字段。后来发现还有个domain的字段需要配置,不然注入是不会生效的document.cookie="token=123;domain=.baidu.com"#使用;分号隔开......
  • 自己动手,通过源码找回 Ant-Design-Blaozr 中 Tree 组件的搜索筛选效果
    最近更新一个Blazorserver的项目,顺带把用到的Ant-Design-Blazor升级到了最新的0.14.4,结果发现之前在0.8.4版本中Tree组件的搜索显示效果变了,从仅显示找到的节点变成了在全部节点中高亮显示匹配的结果,为了节省用户沟通成本(就是懒得跟最终用户费口舌解释),于是自己动手把这个......
  • Linux系统之源码编译部署Redis数据库
    (Linux系统之源码编译部署Redis数据库)一、Redis数据库介绍1.Redis简介Redis是完全开源的,遵守BSD协议,是一个高性能的key-value数据库。2.Redis特点Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用。Redis不仅仅支持简单的key-va......
  • VUE.JS和NODE.JS构建一个简易的前后端分离静态博客系统(三)
    Edit.vue<template><divid="edit"><ClassicHeader><templatev-slot:left><span>编辑随笔</span></template><templatev-slot:right><el-button@click="......
  • Cesium如何加载PBS发布的WMTS服务
    Cesium加载Geoserver发布的WMTS服务,url示例:'http://localhost:8080/geoserver/gwc/service/wmts/rest/nurc:mosaic/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png',而PBS(PortableBasemapServer)发布的地址是这样:http://192.168.58.1:7080/PBS/re......
  • 面试题:JS如何最快的执行垃圾回收机制
    因为没看见答案,所以也不知道对不对。 JavaScript的垃圾回收机制是由JavaScript引擎自动管理的,通常情况下我们无法控制垃圾回收机制的执行时间和频率。然而,我们可以采取一些优化策略来减少垃圾回收的性能开销,从而提高代码执行速度。减少全局变量:全局变量不易被垃圾回收,因......
  • mvc响应-返回json数据
         ......
  • JS倒计时效果
    倒计时实现思路:1-用户输入的时间减去当前的时间就是剩余的时间,即倒计时2-不能用时分秒直接相减,因为出来的结果会是负数,比如01分减去15分,结果是负14分3-需要引入时间戳的概念,用户输入时间的总毫秒数减去当前时间的总毫秒数,得到的就是剩余时间的毫秒数4-最后把剩余时间的毫秒数转化......
  • Nuxtjs实现服务端渲染和静态化站点
    本文将介绍如何使用Nuxtjs对vue项目进行ssr和静态化处理。Nuxtjs简单介绍首先,我们简单了解下Nuxtjs框架,Nuxt.js是一个基于Vue的通用框架,主要用于解决Vue项目的服务端渲染(SSR)。它本质上是一个Vue框架,增加一层node服务,通过对客户端/服务端的抽象封装,使用Nuxt各种资源配置,处理服......
  • VUE.JS和NODE.JS构建一个简易的前后端分离静态博客系统(二)
    后台管理页面,需要配合NODE.JS搭建的EXPRESS服务器使用。main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'import{Button,Input,Form,Link,Divider,Upload,Dialog,Card,Popover,Messa......