滚动加载内容

场景

大概的场景是一个列表,要加载很多的内容,比如一个ul 里面有几万个li,li里面还有很复杂的结构,那么要怎么展示这些li呢。
有些已知条件,总的li个数是要知道的,视图区的大小是要知道的,li的高度是要知道的,其实是要知道ul到底是多少高度,因为要在滚动的时候保持这个高度不变,然后在视图区里替换这些li就好了

一种方案

一种方案是这样的,首先分组,按个数分,比如50个一组,分完以后,给每组套一个div(这时其实已经不是ul、li结构了),这样子就有总数/50个分组了,假设等于m,然后m的高度是知道的,当然最后一个要自己判断一下有没有满50,然后给这m个分组的div一个属性值,比如叫data-groupid,那么data-groupid就是从0到m,这时需要看一下视图区滚动到哪一个div了,把这个div里的li填充上,其余的div给清空,这样就相当于只有50+m-1个dom是在展示的(最后一个div除外),比原来的全部展示少了很多

我的方案

我的方案是这样的,把ul分三块,第一块和第三块各是一个li,第二块是要展示的那50个li,滚动的时候改变第一和第三块的高度值,第二块的高度是不变的,然后根据第一块的高度可以计算出第二块要放的是哪些li

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值