vue-监听视图滚动-加载下一页数据（鼠标滚动到底，加载）

<div class="daily-list" ref="list">
            <template>
                <div v-for="(item,index) in arrayItem" :key="index">
                    <div>{{item}}</div>
                </div>
            </template>
        </div>

 data:

 arrayItem: 100,

 isLoading: false

 

style:

 

.daily-list{

    width: 300px;

    position: fixed;

    top: 0;

    bottom: 0;

    left: 150px;

    /* 具备滚动的能力 */

    overflow: auto;

    border-right: 1px solid #d7dde4;

}

mounted() {
         // 获取dom
         const $list = this.$refs.list;
         // 监听内容的滚动事件
            $list.addEventListener('scroll', () => {
                if (this.isLoading) return;
                // 已经滚动的距离加页面的高度，等于整个内容区域高度时，视为接触底部
                console.log('已经滚动距离',$list.scrollTop);
                console.log('页面的高度',document.body.clientHeight);
                console.log('内容区域高度',$list.scrollHeight);
                if
                (
                    $list.scrollTop
                    + document.body.clientHeight
                    >= $list.scrollHeight
                )
                {
                   console.log('到底了');
                   this.isLoading = true;
                   setTimeout(()=>{
                       this.arrayItem = 200;
                       this.isLoading = false;
                   },2000)
                }
            });
    },

 或者

        <div class="daily-list" ref="list" @scroll="handleScroll">

            <template>

                <div v-for="(item,index) in arrayItem" :key="index">

                    <div>{{item}}</div>

                </div>

            </template>

        </div>

methods: {

 handleScroll(){

            const $list = this.$refs.list;

            if (this.isLoading) return;

            if

                (

                    $list.scrollTop

                    + document.body.clientHeight

                    >= $list.scrollHeight

                )

                {

                   console.log('到底了');

                   this.isLoading = true;

                   setTimeout(()=>{

                       this.arrayItem = 200;

                       this.isLoading = false;

                   },2000)

                }

        }

}