vue项目列表实现滚动调用接口并显示

1、vue列表默认展示20条数据，鼠标滚轮到列表底部时，触发接口调用，接口返回的数据添加到列表中

<template>
    <div>
        <div class="event-list" @scroll="onScroll()">
            <div v-if="listData.length !== 0">
                <div v-for="(item, index) in listData" :key="index">
                    <div :tabindex="index" class="event-item-list flex flex-center fs-14" @click="eventItemClick(item)">
                        <div v-if="item.tag === 0 || item.tag === 1" class="left1 stateBgColorRed"></div>
                        <div v-else-if="item.tag === 4 || item.tag === 5" class="left1 stateBgColorYellow"></div>
                        <div v-else-if="item.tag === 3" class="left1 stateBgColorBlue"></div>
                        <div v-else class="left1 stateBgColorOther"></div>
                        <div class="flex-col flex-center nameDiv stateBg">
                            <div>
                                {{item.eventName}}
                            </div>
                            <div>
                                <img :src="getImg(item)" alt="">
                            </div>
                        </div>
                        <div class="detailDiv flex">
                            <div class="eventLocation flex-col flex-center-start">
                                <div>{{item.eventLocation}}</div>
                                <div>来源: {{item.eventSource}}</div>
                            </div>
                            <div class="eventStatus flex-col flex-center-start">
                                <div>{{getLocalTime(item.eventStartTime)}}</div>
                                <div>
                                    <div v-if="item.eventState === 0" class="flex flex-center">
                                        <span class="in-effect stateBgColorRed"></span>
                                        生效中
                                    </div>
                                    <div v-if="item.eventState === 1" class="flex flex-center">
                                        <span class="in-effect stateBgColorWhite"></span>
                                        已解除
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="flex-col flex-center">
                    <img src="../../../assets/noData.png" alt="">
                    <div class="fs-14">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from "moment"
    import {removeLocalStorageItem, setLocalStorageItem} from "../../../utils/localStorage";

    export default {
        name: "eventList",
        props: {
            listData: Array
        },
        data() {
            return {
                pageNum: 1, // 页码
            }
        },

        methods: {
            getLocalTime(time) {
                return moment(time).format('HH:mm:ss')
            },
            getImg(item) {
                return process.env.VUE_APP_GETURL_IMG + item.logo
            },
            // 列表的点击事件
            eventItemClick(item) {
                //点击-【处置中列表中事件】，进入{联勤联动-工单详情}页面，可以查看当前事件的工单状态
                if (item.tag === 1) {
                    // 本地存储事件id， 工单id，进入联勤联动页面时 要 使用的
                    let itemList = [
                        {name: 'eventId', value: item.eventId},
                        {name: 'orderId', value: item.orderId}
                    ]
                    try {
                        setLocalStorageItem(itemList)
                    } catch (e) {
                        console.log('setLocalStorageItem error=>', e)
                        // 如果报错了，就先移除， 然后再执行一次存储
                        removeLocalStorageItem(itemList)
                        setLocalStorageItem(itemList)
                    }
                    this.$router.push({path: '/eventProcessing'})
                    return
                }
                this.$emit('clickEventItem', item)
            },
            // .event-list 监听滚轮事件的方法
            onScroll() {
                let inner = document.querySelector('.event-list')

                let scrollHeight = inner.scrollHeight
                let scrollTop = Math.ceil(inner.scrollTop)
                let clientHeight = inner.clientHeight

                //为true时证明已经到底，可以请求接口
                if (scrollHeight - scrollTop <= clientHeight) {
                    // 每次请求的数据条数
                    let pageSize = Math.ceil(clientHeight / 96)
                    this.pageNum++
                    // 获取列表最后一条数据的时间
                    let len = this.listData.length
                    let lastData = this.listData[len - 1]
                    lastData.pageSize = pageSize
                    lastData.pageNum = this.pageNum
                    // 调用父组件的方法
                    this.$emit('scrollAddListData', lastData)
                }
            }
        }
    }
</script>

<style scoped>
    @media screen and (max-width: 3839px) {
        .event-list {
            height: calc(100vh - 395px);
            overflow: auto;
            min-height: 500px;
        }

        .nameDiv {
            height: 88px;
            width: 88px;
        }

        .nameDiv div {
            height: 36px;
            line-height: 36px;
        }

        .nameDiv img {
            width: 36px;
        }

        .event-item-list {
            margin-top: 8px;
        }

        .left1 {
            width: 3px;
            height: 88px;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            opacity: 1;
        }

        .detailDiv {
            height: 88px;
            width: 100%;
            background: rgba(77, 137, 255, 0.15000000596046448);
        }

        .eventLocation {
            padding-left: 8px;
            width: 100%;
        }

        .eventLocation div {
            height: 36px;
            line-height: 36px;
        }

        .eventStatus {
            width: 100px;
        }

        .eventStatus div {
            height: 36px;
            line-height: 36px;
        }

        .in-effect {
            display: block;
            width: 4px;
            height: 4px;
            border-radius: 4px;
            margin-right: 4px;
        }
    }

    @media screen and (min-width: 3840px) and (max-width: 9216px) {

    }

</style>

2、父组件中的方法，更新 listData

// 列表滚动到底时，调用接口，列表中增加新的数据
            scrollAddListData(lastData) {
                this.pageSize = lastData.pageSize
                this.lastEventTime = moment(lastData.eventStartTime).valueOf()
                let lastSortId = lastData.sortId;
                this.getEventList(lastData.tag, true, lastSortId)
            },
// 0:待处置 1:处置中 2:已处置 3:观察 4:重报 5:误报 6:忽略  isScroll: 是否滚动添加数据
            getEventList(tag, isScroll, lastSortId) {
                this.stateActiveFlag = tag
                // 不是滚动查询事件列表，恢复属性值
                if (!isScroll) {
                    this.lastEventTime = ''
                    this.pageSize = 20
                }
                // 点击当前事件状态后，设置全局 listDataCurrentStateTag 的值
                this.listDataCurrentStateTag = tag
                getEventPageList({
                    day: this.isYesterday,
                    tag: tag,
                    pageSize: this.pageSize,
                    time: this.lastEventTime,
                    sortId: lastSortId,
                    regionId: this.regionId
                }).then(res => {
                    if (res.code === 0) {
                        let data = res.data
                        // 是滚动，就push数据
                        if (isScroll) {
                            data.forEach(item => {
                                this.listData.push(item)
                            })
                            return
                        }
                        // 不是滚动就重新赋值
                        this.listData = data
                    }
                })
            },