vue 滚动条滚动到底部调用接口

最新推荐文章于 2023-11-16 15:59:16 发布

逆风优雅

最新推荐文章于 2023-11-16 15:59:16 发布

阅读量551

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44603011/article/details/130379893

版权

scroll 滚动条滚动事件

 const scroll = (event) => {
            const target = event.target
            // scrollTop 表示滚动条顶部距离容器顶部的垂直距离，
            // scrollHeight 表示容器的总高度，
            // clientHeight 表示可见区域的高度。


            // 如果已经滚动到了底部
            if (target.scrollTop + target.clientHeight >= target.scrollHeight) {
                // 滚动条已经滚动到底部,就要开始调接口，加载下一页的数据
                // console.log('滚动条已经滚动到底部')
                state.pageSize++

                if (state.pageSize < state.allPages || state.pageSize == state.allPages) {
                    const data = {
                        param: {
                            classificationCode: state.nodeCode,
                            fileName: state.formState.name,
                            issuingAgency: state.formState.type,
                            startDate: state.formState.time ? state.formState.time[0] : '',
                            endDate: state.formState.time ? state.formState.time[1] : '',
                        },
                        pageParam: {
                            pageNum: state.pageSize,
                            pageSize: 10,
                        }
                    }


                    knowledgeTreeDotInfo(data)
                        .then(res => {
                            if (res.code == '200') {
                                console.log(res, '789789');
                                // 更新内容列表部分  的数据
                                if (res.data.list && res.data.list.records && res.data.list.records.length) {
                                    
                                    state.knowledgeList.push(...res.data.list.records)

                                }
                            }
                        })

                }

            }