vue 滚动条向下滑动加载更多

原创 tigon  2021-04-26 15:52:32  阅读 85 次 评论 0 条
<div class="ld-container" id="computer-main" ref="cmdlist"></div>

scrollMoreData() {
    //const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop|| window.pageYOffset  这句如果一直拿到值是0就用 (const scrollTopHeight = this.$refs.cmdlist.scrollTop)
                const scrollTopHeight = this.$refs.cmdlist.scrollTop
                const clientHeight = document.documentElement.clientHeight || window.screen.availHeight
                const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight
                console.log(this.$refs.cmdlist.scrollTop)
                // 滚动条距文档顶部的距离
                let scrollTop = this.$refs.cmdlist.scrollTop
                // 滚动条滚动的距离
                let scrollStep = scrollTop - this.oldScrollTop;
                // 更新——滚动前,滚动条距文档顶部的距离
                this.oldScrollTop = scrollTop;
                if (scrollStep < 0) {
                    console.log("滚动条向上滚动了!")
                } else {
                    // console.log("滚动条向下滚动了!")
                    if ((scrollTopHeight + clientHeight)+50 >= offsetHeight) {
                        if(this.serviceListPage>=this.serviceTotal){
                            console.log(1111)
                            this.noMoreData=true
                            setTimeout(()=>{
                                this.noMoreData=false
                            },2000)
                            return false
                        }
                        else if(this.isScroll){
                            this.loadingMore = true
                            this.serviceListPage += 1
                            let params={
                                MachineNo: 'PC039F5H',
                                RouteCode:'ThinkBu',
                                page:this.serviceListPage,
                                pageSize:this.serviceListPageSize
                            }
                            let timer=null
                            // 这里请求因为后台只有2条数据没法测试翻页效果
                            this.RongIM.dataModel._Computer.getService(
                                params,
                                (res, data) => {
                                    console.log(data)
                                    if (res === 'success') {

                                        // this.serviceListPage=data.pageCount
                                        // this.serviceListPageSize=data.count
                                        if(this.serviceListPage>=data.pageCount){
                                            // this.serviceListPage=1
                                            this.loadingMore = false
                                            this.noMoreData=true
                                            timer=setTimeout(()=>{
                                                this.noMoreData=false
                                                this.isScroll = false
                                            },2000)
                                        }else{
                                            this.isScroll = true
                                        }
                                        if(data.goodsList.length>0){
                                            this.$store.commit('setServiceScrollData', data.goodsList);
                                            this.serviceList = [...this.serviceList, ...res.goodsList]
                                        }

                                    }
                                },
                            );
                            clearTimeout(timer)
                        }

                    }
                }


            }



            mounted() {
        this.$nextTick(()=>{

            this.scollPage = document.getElementById('computer-main');
            this.scollPage.addEventListener('scroll', debounce(this.scrollMoreData),true)
        })
    },
    destroyed () {
        this.$nextTick(()=>{    this.scollPage.removeEventListener('scroll',this.scrollMoreData,true) 
            this.$store.commit('setServiceData', '');
        })

    },
本文地址:https://webge.net/?id=119
版权声明:本文为原创文章,版权归 tigon 所有,欢迎分享本文,转载请保留出处!

评论已关闭!