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)
                }
        }
}
 