纯JS上拉加载,了解一下!(还有个小小回弹效果)

1687年,牛顿发现了万有引力.

1905年,爱因斯坦创立了狭义相对论.

2019年,我没事写写下拉加载.

刚接触JS时,看到那个scroll有点儿怯,这两天壮起胆子有空拿出来写写.

提醒一下,

定时器使得每次上拉时有个小小的回弹,停留3s加载数据,不至于在不停上拉的情况下,没有节制的加载数据;

节流阀避免了多次上拉造成的连续加载过多现象.

两者结合使每次下拉加载过程体验起来更有秩序.

body部分:

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
 </ul>

CSS部分:

<style>
    *{
      margin:0;
      padding:0;
    }
    .list{
      width: 100%;
      
    }
    ul{
      list-style-type: none;
    }
    .list li{
      width: 100%;
      height:10rem;
      line-height: 10rem;
      text-align: center;
    }
</style>

JS部分:

每拉一次加载获取3个li元素.

  
  let list = document.getElementsByClassName('list')[0]
  let liArr =  document.getElementsByTagName('li')
  let num = 8 //为加载出的li元素添加文本,文本值为默认最后一项li元素文本7的后续
  let isLoad = true //加个节流阀,避免尚未加载出的时间段里,上拉多次而导致加载太多

  //为结构中的li元素添加样式,这个纯粹是为了样式好看,可自行删减或添加
  for(let i =0;i<liArr.length;i++){
    if(i%2==1){
      liArr[i].style.background = 'lightseagreen'
    }else{
      liArr[i].style.background = 'lightblue'
    }
  }

  //加载数据的方法

   function addLi(){
    let fragment = document.createDocumentFragment(); //加载出的片段元素,这点参考大神的,值得学习
    for(let i =0;i<3;i++){
      let li =  document.createElement('li')
      li.innerHTML = num++   //注意加号的先后
      if(num%2==1){
        li.style.background = 'lightseagreen'
      }else{
        li.style.background = 'lightblue'
      }

       //注释掉的部分,是尝试随机添加背景色,颜色不好看,放弃
      // let random = parseInt(Math.random()*100)
      // li.style.background = 'rgb('+76 +','+ random+',' + random + ')'
      // li.style.background = '#'+random+789


      fragment.appendChild(li)
    }
    list.appendChild(fragment)
  }



//开启事件监听
window.addEventListener('scroll',function(){
      let clientHeight =  document.documentElement.clientHeight //可视区高度
      

      let scrollHeight = document.documentElement.scrollHeight //文档流高度

      let scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ||0  //滚动出去高度
       
       //文档剩余区域的高度
       // 文档高度-可视区高度-滚动出去的高度 = 文档剩余高度
      let surplus = scrollHeight - clientHeight - scrollDistance  //尚未滚出来的文档流高度
     

      //注意判断条件,当剩余文档流的高度小于0时

      if(surplus<=0&&isLoad){
        
        isLoad = false

        setTimeout(function(){

          addLi()

          isLoad = true

        },3000)  //迟疑三秒再加载出来
      
      }
      
    },false)

最后的事件监听也尝试用了window.onscroll,同样可以实现效果

区别在于:

addEventListener()方法特点：

element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。

addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。

addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。

可以使用 removeEventListener() 来移除之前绑定过的事件。

不过,如果同个页面元素,有多个加载事件,可以各写成方法,在window.onscroll中调用亦可.

最后要提醒自己的是:

节流阀的应用和调用加载函数时所需做得判断(这个判断得让我绕会儿~)