vue实现滚动下拉加载更多功能

最新推荐文章于 2024-07-24 14:58:19 发布

guokanglun

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量1.9k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/gklcsdn/article/details/115543969

版权

Vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<template>
  <div>
    <ul class="box">
      <li v-for="item in dataList">
        {{item}}
      </li>
    </ul>
    <!--<p style="height: 100px;" v-if="flag"> 加载中... </p>-->
  </div>

</template>

<script>
    import _ from 'lodash';
    export default {
        data () {
          return {
              dataList: [1,2,3,4,5,6,7,8,9,0],
          }
        },
        mounted () {
            const that = this;
            window.addEventListener('scroll',function(){
                // 滚动视口高度(也就是当前元素的真实高度)
                let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                console.log(scrollHeight)
                // 可见区域高度
                let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
                // 滚动条顶部到浏览器顶部高度
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(clientHeight + scrollTop == scrollHeight){
                	// 触底执行更多操作（如：发起ajax请求）
                    // this.dataList = [...this.dataList, ...[1,2,3,4,5]]

                    // const data = [1,2,3,4];
                    // that.dataList = that.dataList.concat(data)
                    const data = []
                    for (let i=0;i<10;i++) {
                        data.push(_.random(0,1000))
                    }
                    that.dataList = that.dataList.concat(data)
                  // console.log(_.random(0,100))
                }
            })
        },

    }
</script>


<style>
  div{
    background: pink;
  }
  .box{
    /*height: 500px;*/
    /*min-height: 1000px;*/
    width: 500px;
    margin-top: 1000px;
    background: pink;
    overflow: auto;
  }
</style>