vue移动端上划加载更多

weixin_54378398

于 2021-09-09 11:09:21 发布

阅读量435

点赞数

文章标签： vue 前端 js

本文链接：https://blog.youkuaiyun.com/weixin_54378398/article/details/120196737

版权

在Vue移动端开发中，处理复杂页面的加载更多可以通过监听滚动事件实现。关键代码包括在`mounted`阶段添加滚动事件监听，计算滚动条位置、页面可视高度、内容盒子高度，判断是否滚动到底部。当到达底部时更新加载状态并调用获取更多数据的方法。这种方法有助于优化用户体验，确保数据按需加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue移动端碰到比较复杂的页面加载更多怎么办呢？踩坑之路

废话不多，直接上代码

<div ref="Box" @scroll.passive="scroll">//列表最外层盒子
<div class="list"></div>
</div>
在mounted里面调用
window.addEventListener("scroll", this.scroll, true);
methods方法
 scroll() {
//滚动条距离顶部的距离（因为是负的所以*-1）
      let scrollTop = this.$refs.Box.getBoundingClientRect().top * -1;
//页面可是高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
//盒子的高度
      let scrollHeight = this.$refs.Box.scrollHeight;
//当滚动条距离顶部的距离加上页面可视高度和盒子的高度相等的情况下说明已经到底了
      if (scrollTop + windowHeight == scrollHeight ) {
//可以操作加载更多了。
        this.PageIndex++;
        this.loading=true
        this.getList();
      }
    },

根据个人项目需求总结，如果有什么问题评论区提出来，大家共同解决，共同成长。