zoukankan      html  css  js  c++  java
  • 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() // 加载的列表数据
                }
            }
    

      

  • 相关阅读:
    dubbo服务的运行方式(2)
    朱砂掌健身养生功
    吴清忠养生网
    易筋经十二式
    dubbo入门(1)
    jquery ajax error函数和及其参数详细说明
    com.rabbitmq.client.ShutdownSignalException
    centos 安装rabbitMQ
    SpringMVC @RequestBody接收Json对象字符串
    跨域
  • 原文地址:https://www.cnblogs.com/muzimumu/p/11855675.html
Copyright © 2011-2022 走看看