vue scroll滑动到底部自动加载

最新推荐文章于 2025-05-01 17:15:59 发布

小猴子编程

最新推荐文章于 2025-05-01 17:15:59 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue js vue.js

本文链接：https://blog.csdn.net/AlZhuo/article/details/107132214

vue.js 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何在Vue中实现滑动加载更多功能，通过监听滚动事件判断是否到达页面底部，进而触发数据加载，实现流畅的用户体验。

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

vue中常常会遇到滑动加载的情况，为了不让数据一次性请求到太多。

那么接下来就来实现一下这个功能吧

<template>
  <div id="app">
    <div class="showpanel">
      <div class="title">下拉自动加载</div>
      <div class="boxpanel">
        <div class="show-item" v-for="(index,item) in showdata" :key="index">{{index+1}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showdata: 10
    }
  }
}
</script>
<style lang="less" scoped>
.showpanel {
  height:100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.title {
  padding: 20px;
  text-align: center;
}
.boxpanel {
  flex: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10%;
  background: blue;
  overflow-y: scroll;
}

.show-item {
  width:48%;
  background: brown;
  height:30%;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  font-size: 40px;
}
</style>

1.首先创建10个div,在需要显示的内容区域内。为了区分，颜色有可能有点辣眼睛。

2.检测滑动条是否滑倒底部了

在滑动区域中加入@scoll 监听时间

当该区域的的正文区域的高度，减去可见区域的高度，小于设定的高度的时候，就认为这个滑块可以加载新的资源了。

如图在不停往下移动滑块的时候，就会不断增加滑块的个数

3.当请求接口的时候也是同理的。添加一个页数的参数，跟是否可以加载的判定。

<template>
  <div id="app">
    <div class="showpanel">
      <div class="title">下拉自动加载</div>
      <div class="boxpanel" @scroll="scrollBottom($event)">
        <div class="show-item" v-for="(index,item) in showdata" :key="index">{{index+1}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showdata: [],
      page: 0, // 根据接口定义的初始值
      loadflag: false // 是否可以加载数据
    }
  },
  methods: {
    scrollBottom(e) {
      let self = this
      let Scroll = e.target
      // 网页可见区域高：document.body.clientHeight
      // 网页正文全文高：document.body.scrollHeight
      let scrollHeight = Scroll.scrollHeight - Scroll.clientHeight
      self.scrollTop = Scroll.scrollTop
      if (scrollHeight - Scroll.scrollTop < 100 && !self.loadflag) {
        console.log('到底部了')
        self.loadflag = true
        self.page++
        self.loadData()
      }
    },
    loadData() {
      let self = this
      self.$axios
        .post('接口', '参数')
        .then(response => {
          var data = response.data

          if (data.code === 1) {
            if (data.data.length > 0) {
              var list = self.showdata
              self.showdata = list.concat(data.data)
              self.loadflag = false
            } else {
              console.log('没有更多参数了')
            }
          } else {
            console.log(data.meg)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    created () {
      let self = this
      self.loadData()
    }
  }

}
</script>
<style lang="less" scoped>
.showpanel {
  height:100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.title {
  padding: 20px;
  text-align: center;
}
.boxpanel {
  flex: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10%;
  background: blue;
  overflow-y: scroll;
}

.show-item {
  width:48%;
  background: brown;
  height:30%;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  font-size: 40px;
}
</style>

python课程

https://marketing.csdn.net/poster/109?utm_source=NEWFXDT