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)

                }

        }

}