• vue 原生添加滚动加载更多


       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() // 加载的列表数据
                }
            }
    

      

  • 相关阅读:
    功能强大的T4文本模版
    C#中.snk文件的作用
    ASP.NET MVC中实现多个按钮提交的几种方法
    asp.net mvc强大的分页控件MvcPager
    设计模式—观察者模式
    Http响应码

    编码习惯
    vim 快捷键 转
    makefilevvhttp://www.tudou.com/programs/view/e3Z8RbxFIZE/
  • 原文地址:https://www.cnblogs.com/muzimumu/p/11855675.html
Copyright © 2020-2023  润新知