美文网首页
关于页面无限滚动思路

关于页面无限滚动思路

作者: FantasyYoung | 来源:发表于2018-08-08 21:56 被阅读16次

背景

最近项目已经部署到客户环境中,客户也在进行各方面的功能测试,其中测试到一个页面时,发现了一个问题:

  • 业务是这样的:进入终端的设置页面需要进行频道的各个方面的设置。有频道号码的修改,频道的排序。
  • 由于此处的频道数据较多(>1000个),现在实现方案,是一次性全部加载出来。致使浏览器在渲染时,会出现渲染时间较长的问题,体验极差!
  • 并且每次修改数据都会重新加载页面数据,第二个问题就会暴露的更为严重。

解决方案

页面无限滚动。

  • 无限滚动有很多方案:
    • 一种是首次加载第一页,在往下滚动时,逐步加载第二页,第三页,以此类推,直至加载全部数据。
    • 第二种是,首次加载第一页,在往下滚动时,逐步加载第二页,等加载到第三页时,删除第一页数据,这样每次用户看到数据都是固定的数据量。
  • 因为需求所限,在每次进行修改时,页面的数据需要进行刷新,这样一来,必须摒弃掉第一种方案,采用第二个方案。

实现思路

  • 首页直接从服务器获取数据,将此数据进行缓存。
  • 然后每次滚动页面,滚动到需要加载数据的临界点时,直接从缓存中提取下一页或者上一页的数据,加载到页面数据中。
  • 流程图


    流程图

相关文章

  • 关于页面无限滚动思路

    背景 最近项目已经部署到客户环境中,客户也在进行各方面的功能测试,其中测试到一个页面时,发现了一个问题: 业务是这...

  • 页面滚动和页面无缝滚动

    页面滚动实现思路 页面无缝滚动实现思路 两者关联 页面滚动实现思路 (1)首先要做一个容器当做父元素,用来放你要滚...

  • MG--UIScrollView无限滚动

    UIScrollView无限滚动的图解: UIScrollView无限滚动的思路:就是每一次滑动之后显示图片都是最...

  • 无限滚动与分页设计

    无限滚动技术:简单地向下滚动就可以不断刷新页面,加载更多的内容。分页:将内容分为单独页面,滚动到页面底部看到数字行...

  • 无限滚动与分页设计

    无限滚动 无限滚动技术,简单地向下滚动就可以不断刷新页面加载更多的内容,现在很多移动端使用的方式。 一、优点 1....

  • js之jquery判断页面滚动到底部

    有时候我们需要页面滚动到底部的时候去加载更多的数据,实现思路基本上就是判断浏览器页面是否滚动到了页面底部,当滚动到...

  • Swift.多页面滚动控制器

    实现功能: 简单调用实现多页面滚动控制。 子页面数量自适应。 滚动结束代理回调index。 实现思路: 这个控制器...

  • JS - 单页面无限加载页面

    DEMO功能: 实现听过滚动无限刷新增添新元素 监听 scroll 事件 通过监听 scroll 事件,在页面滚动...

  • JS原生监听滚动条

    一.情景 需求:页面中间某个部分能随着鼠标滚动而滚动,且不显示滚动条。 二.思路 如果只是考虑webkit内核那就...

  • 滚动页面切换导航栏[小程序]

    思路:1.当页面滚动到一定高度时,导航栏置顶,否则取消置顶。2.当页面继续滚动时,滚动到A的内容就指向导航栏上的A...

网友评论

      本文标题:关于页面无限滚动思路

      本文链接:https://www.haomeiwen.com/subject/iolfbftx.html