zoukankan      html  css  js  c++  java
  • 手机端下拉加载

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

    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

  • 相关阅读:
    NHibernate源码分析
    jQuery插件:跨浏览器复制jQuery-zclip
    NHibernate入门实例
    NHibernate系列之一--刘东
    关于登陆窗口的关闭、传值
    java 内部类 多线程
    插入时排序
    按某些字段排序数据
    获取顺序排列
    Oracle数组类型
  • 原文地址:https://www.cnblogs.com/xiaohuohuai/p/14759184.html
Copyright © 2011-2022 走看看