zoukankan      html  css  js  c++  java
  • 移动端h5列表页上拉加载更多

    背景

    上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表。设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的。所以我一开始是想用分页来着,后来想想,谁特么移动端还给分页的,PC做多了,人都做傻了。于是乎就去网上找找插件咯。。。。不找还好,一找各种五花八门的乱七八糟的jq插件,处于不想让项目过于臃肿,于是自己理了一下逻辑,不用插件就实现上拉加载更多

    不多说,上代码好了

    我来解释一下这个加载的原理,首先第一个红色箭头是回调成功后获取的数据,默认是回调第一页的数据(叫后端给接口的时候要分页),然后把第一页的数据放到data.recordList里面。重点在第二个箭头,我利用的是当 屏幕高度 + 网页被卷去的高 >= 网页正文全文高 的时候,再次调用getList(),就如第一个箭头所见,第一次调用getList的时候page=1,成功回调后page++,所以当我第二次调用的时候就是第二页的内容,把第二页的内容加到第一页上,这样在视觉效果上就形成了一个上拉加载更多的一个样子。然后当翻到最后一页的时候,isEnd就会为true,放在页面最下面的loading.gif就会被除去,再上拉的时候,getList()方法不会进入到ajax里面去获取数据。

  • 相关阅读:
    八、springboot 简单优雅的通过docker-compose 构建
    【并发编程】ThreadLocal其实很简单
    计算机网络
    相似度
    不同激活函数的区别
    快速排序+归并排序
    xgboost
    c++面试
    PCA算法和SVD
    各种排序算法的时间复杂度和空间复杂度
  • 原文地址:https://www.cnblogs.com/Nick-chen/p/6439609.html
Copyright © 2011-2022 走看看