【Vue】实现无限滚动加载

文章目录

  • 法一:ElemntUI的InfiniteScroll
  • 法二:直接操作window窗口的滚轮事件

先提前预告一下:

  • 如果需要的是单个确定高度的容器组里进行无限滚动刷新,则使用InfiniteScroll最方便

  • 而如果无限滚动依赖的是整个窗口的滚轮到底部,则使用法二才行。ElemntUI的InfiniteScroll无法实现

法一:ElemntUI的InfiniteScroll

组件 | Element

纯模仿官网即可,一定要注意v-infinite-scroll只能是设置在某个独立容器中,而不能是整个页面窗口,如图:

无法对整个页面窗口实现。【所以这个容器必须设置高度,如果没有高度,则默认是一开始就直接疯狂加载响应】
【Vue】实现无限滚动加载_第1张图片
尝试成功的代码展示:

<el-card 
        class="message-card"
        v-infinite-scroll="load"
        :infinite-scroll-disabled="this.loading || this.noMore"
        infinite-scroll-immediate='false'
        >
        <div v-for="(item, i) in this.messages">
//用到三个变量,offset是跳过第几个
//loading和noMore都是用于什么时候禁用无限滚动加载调用方法
offset: 0,
loading: false,
noMore: false,
messages: []
load(){
	//如果是第一次加载,交给mounted而不是交给scroll的加载
	//或者loading = true表示当前正在加载,不要再触发方法,滚动条此时还在底部
    if(this.loading || this.offset==0) {return}
    //如果还有数据就请求
    if(!this.noMore) {
    	//现在在请求
        this.loading = true
        this.$http.get("/message/"+this.offset)
        .then((res) => {
        	//把数据拼上去
           this.messages = this.messages.concat(res.data.messages)
           //如果这次请求的数据不够10条,说明后面没有数据了
           if(res.data.messages.length < 10) {
               this.noMore = true;
           }
           //下一次从offset+1开始
           this.offset += 10
           //表示加载结束,此时页面也渲染好了,滚动条也不在底部,可以放开等待下一次滚动条到底部
           this.loading = false
       })
   }
},

我遇到的几个问题的解决思路,可以试试

  • 一个是自动一次性全加载了,把load()改成load
v-infinite-scroll="loadLikeMessages()" ×
改成
v-infinite-scroll="loadLikeMessages" √
然后就成功了
  • 还有一个是异常You may have an infinite update loop in a component render function.
    解决是把this.loading = false放在请求结束后的then里,因为是异步请求,如果在外面会提前执行,那么就是不断触发this.loading = true后又 = false,死循环
load(){
    if(!this.noMore) {
    	//现在在请求
        this.loading = true  //《====
        this.$http.get("/message/"+this.offset)
        .then((res) => {
        	xxxxxx
           this.loading = false //《======
       })
   }
   
   //如果在这里this.loading = false,就会死循环
},

法二:直接操作window窗口的滚轮事件

理论基础(重要):

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

  • scrollTop : 滚动条在Y轴上的滚动距离。

  • clientHeight : 内容可视区域的高度。

  • scrollHeight : 内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

举例说明:


【Vue】实现无限滚动加载_第2张图片

下面先提供三个方法,用来获取scrollTop、clientHeight、scrollHeight的信息。可直接复制使用的,写在methods里

基本原理都是比较document.body.clientHeight与document.documentElement.clientHeight

documentElement 对应的是 html 标签,因此最常用document.documentElement对象来获取这些信息

//获取当前可视范围的高度
getClientHeight() {
    var clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
    } else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
    }
    return clientHeight
},
    
//获取文档完整的高度
getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}//获取当前滚动条的位置
getScrollTop() {
    var scrollTop = 0;
    //window.pageYOffset = document.documentElement.scrollTop
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
    } else if (document.body) {
        scrollTop = document.body.scrollTop
    }
    return scrollTop
}

然后我们需要一个监听器,监听滚动事件,在mounted钩子函数中就进行定义,因为我们是直接给window加装的,而不是给某个组件或者标签。因此不需要加入响应事件,但是要指定监听的回调函数,并且最重要的是最后要传入一个true的参数,否则失效。但是要注意,滚动事件的监听器需要手动销毁,否则会曝出异常。

methods: { 
    //使用上面介绍的方法
    getScrollTop(){},
    getClientHeight(){},
    getScrollHeight(){},
    //回调函数
    windowScroll() {
        //获取三个值
        var scrollTop = this.getScrollTop()
        var clientHeight = this.getClientHeight()
        var scrollHeight = this.getScrollHeight()
        //如果满足公式则,确实到底了
        if(scrollTop+clientHeight == scrollHeight){
            //发送异步请求请求数据,同时携带offset并自增offset
            //noMore是自定义变量,如果是最后一批数据则以后都不加载
            if(!this.noMore) {
                this.$http.get("/xxxx"+this.offset).then((res) => {
                    this.news = this.news.concat(res.data.news)
                    if(res.data.news.length < 10) {
                        this.noMore = true;
                    }
                    //记得对offset进行自增
                    this.offset += 10
                })
            }
        }
    }
}
mounted() {
    window.addEventListener('scroll', this.windowScroll,true) //监听页面滚动
},
destroyed() {
    window.removeEventListener("scroll", this.windowScroll);//销毁滚动事件
}
//删除滚动监听器,建议使用beforeRouteLeave,因为destroyed()钩子在路由跳转时不会触发
beforeRouteLeave() {
	window.removeEventListener("scroll", this.windowScroll);//销毁滚动事件
}

到此已经能实现了

你可能感兴趣的:(vue相关注意事项,项目相关,vue.js,javascript,前端)