js实现下拉刷新和上拉加载解析

时间：2022-09-28 编辑：坚强来源：一聚教程网

本文为小伙伴们带来了关于js实现下拉刷新和上拉加载解析，感兴趣的小伙伴一起来看看吧。

1.下拉刷新

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

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

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

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

大概需要做的几个点:

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

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

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

less word,show me the code...



 

    
    
    css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
 
        .container {
            /* 容器原始位置向上移动60px,隐藏掉loading盒子,下拉时才显示出来 */
            position: relative;
            top: -100px;
        }
 
        .container .loading {
            text-align: center;
            
            line-
        }
 
        .container .list {
            border: 1px solid #666;
        }
 
        .container .list li {
            line-
        }
 
        .container .list li:nth-child(2n) {
            background-color: #ccc;
        }
    

 

    
        
            下拉刷新
        
        
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容

效果如图所示:

2.上拉加载

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

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

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

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

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

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

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

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



 

    
    
    
    

 

    
        
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容
            我是内容

效果如图：

以上就是关于js实现下拉刷新和上拉加载解析的全部内容了，感兴趣的小伙伴记得点击关注哦。

上一个： Javascript类型转换解析
下一个： dispatchEvent解决重叠元素响应事件教程

推荐专题

最新下载

热门教程

js实现下拉刷新和上拉加载解析

1.下拉刷新

2.上拉加载

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程