vue3 触底加载数据（滚动加载分页数据）

html：

    <div class="integral-record-cont">
                        <div class="integral-record-item" v-for="(item,index) in integralList" :key="index"
                            v-if="integralList.length>0">
                            <div class="traditional-integral-panel">
                                <div class="traditional-integral flex-center-between">
                                    <div class="integral-name">太阳雨游戏积分</div>
                                    <div class="flex-center-start">
                                        <span class="integral-num integral-num-green" v-show="item.type==1">
                                            +{{item.integral}}</span>
                                        <span class="integral-num integral-num-orange" v-show="item.type==2">
                                            -{{item.integral}}</span>
                                        <div class="arrow-down-panel flex" @click="bagShow(index)"
                                            v-if="item.luckyBagIntegral">
                                            <van-icon class="arrow-down" name="arrow-down"></van-icon>
                                        </div>
                                    </div>
                                </div>
                                <div class="integral-date"> {{item.createDate}}</div>
                            </div>
                            <div class="blessing-bag-integral flex-center-between" v-if="item.isShow">
                                <div class="blessing-bag-integral-text">其中游戏福袋积分</div>
                                <div class="blessing-bag-integral-num flex-center-start">{{item.luckyBagIntegral}}
                                    <div class="arrow-down-panel">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <no-data></no-data>
                        </div>
                    </div>

css：

.integral-record-cont{
    height:8.4rem;
    overflow-y: scroll;
    padding: 0 .32rem;
}
.integral-record-tab-item {
    font-size: .28rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #696969;
    line-height: .4rem;
    border-bottom: .03rem solid transparent;
    padding: 0 0 .16rem 0;
}

.tabActive {
    color: rgba(42, 138, 57, 1);
    border-bottom: .03rem solid rgba(42, 138, 57, 1);
}

.integral-record-item {
    padding: .3rem 0 .2rem 0;

}

.integral-record-item:not(:last-child) {
    border-bottom: 1px solid rgba(216, 216, 216, 1);
}

.integral-name {
    font-size: .28rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #333333;
    line-height: .4rem;
}

.integral-num {
    font-size: .32rem;
    font-family: DINAlternate-Bold;
    font-weight: bold;
    line-height: .38rem;

}

.integral-num-green {
    color: #2A8A39;
}

.integral-num-orange {
    color: #FF771D;
}

.arrow-down-panel {
    width: .34rem;
    height: .34rem;
}

.arrow-down {
    font-size: .32rem;
    margin-left: .08rem;
}

.integral-date {
    font-size: .28rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #7D7D7D;
    line-height: .4rem;
    margin: .16rem 0;
}

.blessing-bag-integral-text {
    font-size: .28rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #333333;
    line-height: .4rem;
}

.blessing-bag-integral-num {
    font-size: .28rem;
    font-family: DINAlternate-Bold;
    font-weight: bold;
    color: #333333;
    line-height: .32rem;
}

js：

<script>

    const {

        createApp,

        reactive,

        toRefs,

        ref,

        onMounted,

        watch,

        computed

    } = Vue;

    const TL_APP = createApp({

        setup(props, context) {

            const pageData = reactive({
             
                page: 1,

                pageSize: 10,

                total: 0,//总页数

                integralList: [], //数据列表


                // 查询积分收支记录

                getIntegralList() {

                    axiosInstance.get(

                        `/micro/ms/user/integrals?page=${pageData.page}&pageSize=${pageData.pageSize}`

                    ).then(({

                        code,

                        data,

                        msg

                    }) => {

                        if (code === 0 && data) {

                            var integralList = data.list;

                            integralList.forEach((item) => {

                                item.isShow = false // 给一个对象赋值一个属性

                            })

                            pageData.integralList.push(...integralList)

                            pageData.total = data.pagination.total;

                         

                        } else {

                            vant.Notify({

                                type: 'danger',

                                message: msg

                            });

                        }

                    })



                },

               
             
            })

            onMounted(() => {

               
                pageData.getIntegralList(); //查询积分记录

                // 监听滚动事件

                // nextTick(() => {

                    let scrollTargetBox = document.querySelector('.integral-record-cont');

                    

                    scrollTargetBox.onscroll = (e) => {

                    

                        var scrollHeight = scrollTargetBox.scrollHeight; //251

                        var scrollTop = scrollTargetBox.scrollTop; //0-18

                        var clientHeight = scrollTargetBox.clientHeight; //233

                        console.log(scrollHeight,scrollTop,clientHeight,'高度')

                        if (scrollHeight - clientHeight == scrollTop) {

                            //滚动条滚到最底部

                            if (pageData.integralList.length >= pageData.total) return

                            pageData.page++;

                            pageData.getIntegralList()



                        }

                    }

                // })



            })

            return {

                ...toRefs(pageData)

            }

        }

    })

    TL_APP.use(vant);

    TL_APP.mount('#app');

</script>