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

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

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

相关阅读

相关微信小程序开发使用onreachBottom实现页面触底加载及分页

一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样，都属于小程序的生命周期事件，作用就是在页面下拉到底部时触发这

心已赠人/ 2023年10月10日 18:40/ 0 赞/ 78 阅读

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

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

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

相关 Vue触底加载

页面内的触底加载需求：页面滚动到接近底部，再次发送请求，获取更多数据，渲染到页面上 data(){ // 请求页数 page:

- 日理万妓/ 2023年09月24日 12:49/ 0 赞/ 18 阅读

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

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

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

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

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

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

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

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

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

相关 JS案例：触底懒加载

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

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

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

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

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

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

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

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

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

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

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