原生JS实现下拉刷新、上拉加载

最近部门移动端需要实现一个评价列表查询的功能，由于之前没有实现过，因此找了第三方库来实现，前前后后磕磕碰碰的花了一个小时终于实现了一个上拉刷新、下拉加载的功能。虽然实现了该功能，但是毕竟使用的是第三方库的组件，一旦出啥问题也不好解决，想了想，反正部门内部的组件库没有上拉刷新、下拉加载的组件，那么我何不写一个这样的组件呢？于是下定决心为部门组件库增加该组件。

先上效果

image

聊聊实现思路

移动端下拉刷新、上拉加载主要基于H5的三个事件完成，分别是 touchstart、touchmove、touchend。三者绑定在任意元素上。
touchstart：顾名思义，就是手指第一次触摸到所绑定的元素时所触发的事件。
touchmove：顾名思义，就是手指在绑定的元素中滑动时触发的事件。
touchend：顾名思义，急速手指松开时触发的事件。
基于上述三者，我们就可以获取某一元素的触摸、滑动、松开的事件，但是只是获取到事件是没法让元素滑动的，那么问题来了，如何让元素滑动？
让元素滑动主要是基于css3中的transform：translateY;属性，它可以让一个元素基于原始位置向X、Y轴移动一定的像素距离。例如transform：translateY(50px);

这样就可以利用 touchstart、touchmove、touchend 和 transform来实现下拉刷新、上拉加载的功能了。

为了避免效果不好，于是我先用原生写了上拉刷新、下拉加载的功能。

后期会发出基于VUE的上拉刷新、下拉加载组件。

话不多说，Show Code...

这是body部分

    

        

            Topbar
        
        

        
        

            
1
            
2
            
3
            
4
            
5
        
        

            
加载中...
        
    

这是JS部分

这是CSS部分

总结

活到老学到老...