• 手机端下拉加载


    第一种方式(通过可视高度和滚动条高度来判断)

    mounted() {
         
          this.getParmas()
         
    
          let that = this;
          window.onscroll = function () {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            if (scrollTop + windowHeight == scrollHeight) {
             
                that.page_count = that.page_count + 1;
                that.getUserJourney();
             
             
            }
          };
    
    
        },

    第二种(通过内容区的可视高度和滚动条高度判断)

     mounted() {
        let _:any=this
        const SELECTWRAP_DOM:HTMLElement | null = document.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM&&SELECTWRAP_DOM.addEventListener('scroll',function (e:any) {
          const CONDITION = this.scrollHeight - this.scrollTop > this.clientHeight
          if(!CONDITION){
            _.getselectData()
          }
        })
      }

    第三种用的是elementUI中的v-infinite-scroll

    <div class="box" v-infinite-scroll="test">
        <div class="list">111</div>
        <div class="list">111</div>
        <div class="list">111</div>
        <div class="list">111</div>
      </div>

    每次滚动到底部时就可会触发test这个方法。属性仅在设置了overflow的地方有效。
    目前经测试在elementUI项目有效,具体查看elementUI的无效滚动。其他项目需要安装组件’vue-infinite-scroll

  • 相关阅读:
    数据库水平切分的实现原理解析---分库,分表,主从,集群,负载均衡器
    现代 PHP 新特性系列(六) —— Zend Opcache
    Apache配置参数详解
    Git的常用命令
    PHP如何防止XSS攻击
    CSRF的防御实例(PHP)
    Web安全之CSRF攻击
    PHP五种常见的设计模式
    PHP四种基础算法详解
    php遍历文件的5种方式
  • 原文地址:https://www.cnblogs.com/xiaohuohuai/p/14759184.html
Copyright © 2020-2023  润新知