原生js实现下拉刷新和上拉加载更多

1.下拉刷新

由于原生js太久不用了,这里列一下此处涉及到的前置知识点:

移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时)

手指在页面上的坐标: pageX,pageY

写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新.

大概需要做的几个点:

1.在手指按下时(touchstart)记录手指的按下位置

2.在手指下滑时(touchmove)计算手指的坐标离手指按下时初始位置的差值得出下滑的距离,让容器顺应手指下滑的方向移动(translateY)对应差值的距离,对应的给一个允许用户下滑的最大距离,避免页面下拉过长.

3.在手指松开时(touchend)判断下滑的差值是否达到预期的值来进行对应的刷新数据和回弹loading.

less word,show me the code...





    
    
    
    Document
    



    
下拉刷新
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 效果如图所示:

    2.上拉加载

    前置js知识点: 三个dom属性
    *clientHeight:不包含边框的元素可视区高度

    *scrollTop:元素滚动时卷上去的距离

    *scrollHeight: 元素实际高度,包含卷上去的高度

    知道了上述三个属性后,于是就有了一个公式:

    clientHeight + scrollTop <= scrollHeight - 触底的指定距离

    然后就是上拉加载的原理:

    通过监听元素的滚动事件(scroll)判断元素是否滚动到了距离底部指定距离时触发加载数据

    知道了原理和三者之间的关系后,我们就知道只需要判断这个公式即可知道滚动条有没有进入触底距离,话不多说show code~

    
    
    
    
        
        
        
        Document
        
        
    
    
    
        
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 我是内容
  • 效果如图:

    你可能感兴趣的:(js,javascript,前端)