vue滚动到底，请求后端数据分页加载更多

比眉伴天荒 2024-04-03 14:10 44阅读 0赞

一个可滚动的内容区域，绑定滚动事件

<div class="lines" @scroll="scrollBottom">
        ...
      </div>

.lines {
        
        height: calc(50vh - 100px);
        overflow: auto;
        }

/** 判断滚动到底部 */
        scrollBottom(e) {
        
          const {
         scrollTop, scrollHeight, clientHeight } = e.srcElement
          // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
          if (scrollTop + clientHeight >= scrollHeight) {
        
            if (this.noMore) return 
            this.pageIndex++
            this.getMoreData()
          }
        },

/** 请求后端分页数据，滚动到底加载更多 */
        async getMoreData() {
        
          const {
         data: res } = await axios.post(`xxxx`, {
        
            pageSize: 4,
            pageIndex: this.pageIndex- 1,
          })
          if (res.code === 200) {
        
            // 数组有值说明还有数据
            if（res.data.length）{
        
               this.pageIndex++
               this.data = [...this.data,...res.data] // 合并数据
            }
            else {
        
              this.noMore = true // 用一个变量来记录没有更多数据了
            }
          } 
        },

发表评论取消回复

表情：

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

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

相关阅读

相关 vue滚动到底，请求后端数据分页加载更多

一个可滚动的内容区域，绑定滚动事件 <div class="lines" @scroll="scrollBottom"> ... </di

比眉伴天荒/ 2024年04月03日 14:10/ 0 赞/ 45 阅读

相关 Js滚动条到底底部加载更多

[https://blog.csdn.net/qq\_40816649/article/details/86512538][https_blog.csdn.net_qq_408

傷城~/ 2022年12月27日 08:45/ 0 赞/ 151 阅读

相关加载更多请求下一页滚动监听

目录点击方式滚动方式 -------------------- 2种方式，一种是点击按钮请求下一页，另一种是滚动到底部的时候请求下一页。引入骨架屏优化加载过程中

爱被打了一巴掌/ 2022年12月21日 06:29/ 0 赞/ 162 阅读

相关 html 鼠标滚动轴滚动分页加载

滚动加载原理其实很简单，就是先判断当前是不是处在最底部，如果在最底部就可以继续加载添加数据。这里只是判断是否处在了底部，其他部分就根据自己的业务不同而代码不同。直接上代码吧。

电玩女神/ 2022年12月19日 08:53/ 0 赞/ 155 阅读

相关 vue 移动端加载更多分页组件_vue 分页加载数据页面滚动加载更多

组件源码 .vue文件 style="height:100%;overflow:auto" ref="filesTable" > ref="tableInner" c

小灰灰/ 2022年10月26日 14:09/ 0 赞/ 271 阅读

相关滚动条加载分页数据

<div id="listBody"> </div> listBody 数据外最大的盒子 data(){ return{ page: {

亦凉/ 2022年09月04日 11:56/ 0 赞/ 268 阅读

相关 Vue向下滚动加载更多数据-scroll-案例

vue-infinite-[scroll][] 安装 npm install vue-infinite-scroll --save > 尽管官方也推荐了几

男娘i/ 2022年09月03日 14:25/ 0 赞/ 870 阅读

相关 vue实现滚动条加载更多数据

原理： 1、参考线位置lineHeight：即判断滚动到何处触发事件； 2、页面卷入的高度scrollHeight； 3、浏览器窗口的高度windowHeig

Myth丶恋晨/ 2022年04月06日 05:56/ 0 赞/ 504 阅读

相关 vue 上拉加载更多数据 / 分页

加载状态 <div v-if='has_log == 0'> <load-more tip="上拉加载" :show-loading="fals

冷不防/ 2022年03月20日 07:09/ 0 赞/ 481 阅读

相关小程序加载数据后滚动条加载到底部

1 wx.createSelectorQuery().select('body').boundingClientRect(function (rect) {

逃离我推掉我的手/ 2021年12月21日 10:03/ 0 赞/ 318 阅读