欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 原生添加滚动加载更多

程序员文章站 2023-08-24 15:24:03
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱。我们在mounted建立滚动,destroyed销毁滚动。 mounted () { window.addEventListener('scroll', this.handleScroll) }, destroye ......

   vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱。我们在mounted建立滚动,destroyed销毁滚动。

    mounted () {
        window.addeventlistener('scroll', this.handlescroll)
    },
    destroyed () {
        window.removeeventlistener('scroll', this.handlescroll)
    },

  定义一个函数,在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度,在加载后如果列表长度为0时应该停止加载,要不会出现一直加载的情况

     handlescroll () {
            //变量scrolltop是滚动条滚动时,距离顶部的距离
            var scrolltop = document.documentelement.scrolltop||document.body.scrolltop;
            //变量windowheight是可视区的高度
            var windowheight = document.documentelement.clientheight || document.body.clientheight;
            //变量scrollheight是滚动条的总高度
            var scrollheight = document.documentelement.scrollheight||document.body.scrollheight;
            //滚动条到底部的条件
            if(scrolltop+windowheight==scrollheight &&this.list.length !==0){
                this.loadmore() // 加载的列表数据
            }
        }