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

谁践踏了优雅 2022-11-29 12:56 212阅读 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 条评论，212人围观）

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

相关阅读

相关【Uniapp小程序】实现上滑加载分页（触底加载）附后端Thinkphp代码

分析说明后端 > $query_total=DB::table('book')->where(["class_id"=>$class_id])->pagi

野性酷女/ 2023年09月24日 17:30/ 0 赞/ 45 阅读

相关小程序上拉触底加载更多数据

1 html <view class="no-data" wx:if="{ {list.length == 0&&no}}">暂无数据~</view> <vi

客官°小女子只卖身不卖艺/ 2023年06月19日 02:28/ 0 赞/ 2 阅读

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

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

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

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

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

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

相关 JS案例：触底懒加载

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

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

相关 Leaflet地图加载百度底图

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

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

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

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

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

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

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

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

相关 uniapp下拉刷新和触底

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

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

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

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

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