h5页面触底加载--div触底加载

谁践踏了优雅 2022-11-29 12:56 177阅读 0赞

页面触底加载

page = 1 //当前页
        pages = 0 //总页数
        $(window).scroll(function(){ 
            //判断是否滑动到页面底部
            if($(window).scrollTop() === $(document).height() - $(window).height()){ 
                // TODO 滑动到底部时可请求下一页的数据并加载，加载可使用append方法
                if(page != pages){ 
                    load(page += 1) //加载数据的方法
                }
            }
        });
    
    	function load(page){ 
    		//ajax请求数据 用append方法添加到页面
    		//拿到后台数据 确定当前页和总页数
    		page = res.data.current_page 
            pages = res.data.last_page
    	}

div 触底加载

<div style="max-height: 15rem;overflow-y:scroll;" id="Box">

page = 1 //当前页
        pages = 0 //总页数
        $("#Box").scroll(function () { 
            let scrollTop = document.getElementById("Box").scrollTop;
            let clientHeight = document.getElementById("Box").clientHeight;
            let scrollHeight = document.getElementById("Box").scrollHeight;
            if (scrollTop + clientHeight >= scrollHeight) { 
                if(bpage != bpages){ 
                    load(bpage += 1)//加载数据的方法 与上面页面触底加载方式一致
                }
            }
        })

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers实战：加载静态图片作为底图

我们经常会看到一些商场地图或者其他的静态图展示的情况，在Openlayers实战中，我们加载静态图片，使其成为底图，通过缩放，来展示各个部分。效果图 ![在这里插入图

清疚/ 2024年03月17日 17:44/ 0 赞/ 23 阅读

相关 uni-app 发送请求，分页请求，触底加载

1. 发送请求，保存数据 uni.request({ url: '接口?pageNo='+this.pageNo, metho

桃扇骨/ 2022年12月25日 13:52/ 0 赞/ 62 阅读

相关 h5页面触底加载--div触底加载

页面触底加载 page = 1 //当前页 pages = 0 //总页数 $(window).scroll(function(){

谁践踏了优雅/ 2022年11月29日 12:56/ 0 赞/ 178 阅读

相关 JS案例：触底懒加载

接着上篇文章：[ajax获取图片列表][ajax]，我们来实现一下JS的经典案例，懒加载在web应用中，系统的响应速度对用户体验十分重要，其最主要的影响来源于服务端数据库查

刺骨的言语ヽ痛彻心扉/ 2022年11月05日 01:57/ 0 赞/ 205 阅读

相关 Leaflet地图加载百度底图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淩亂°似流年/ 2022年09月04日 05:52/ 0 赞/ 252 阅读

相关小米手机加载h5页面加载不出图片

昨天想着项目上线以后就可以开开心心的回家了，结果测试同学验证的时候拿着小米手机来找我，说是图片没加载出来，又开了其他好多手机都是好好的。看了半天发现是业务同学在配置平台配置的图

矫情吗；*/ 2022年05月01日 12:30/ 0 赞/ 241 阅读

相关小程序下拉刷新上拉触底加载数据

1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数，我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数，其中就会生成「o

忘是亡心i/ 2021年12月19日 14:25/ 0 赞/ 329 阅读

相关 uniapp vue 子组件触发父页面scrow-view触底事件（下拉加载）

最近再用uniapp,结果发现子组件没有页面级生命周期，onReachbotton没办法直接使用，所以用了子组件监听父组件选项卡触底事件。父页面 <!--这

悠悠/ 2021年09月07日 06:19/ 0 赞/ 578 阅读

相关 uniapp下拉刷新和触底

效果图： ![20210306115501184.gif][] 代码实现：结构目录： ![20210306113541858.png][] pages.js

阳光穿透心脏的1/2处/ 2021年07月25日 16:53/ 0 赞/ 692 阅读

相关 uni-app下拉刷新触底加载更多

首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里 ![waterma

逃离我推掉我的手/ 2021年07月25日 02:49/ 0 赞/ 2005 阅读