原生javascript实现页面触底加载更多

  • 原创
  • |
  • 浏览：1392
  • |
  • 更新：
  • |
  • 标签：JAVASCRIPT HTML 
  • 原生javascript实现页面触底加载更多1
  • 原生javascript实现页面触底加载更多2
  • 原生javascript实现页面触底加载更多3
  • 原生javascript实现页面触底加载更多4
分步阅读

项目中常见的触底加载更多我们经常遇到，不过很多人都是用网上的jquery的插件来实现的，个人觉得小题大做，反而性能更差了，所以这里我写原生的给大家。

工具/原料

  • 编辑器Hbuilder
  • html+javascript

方法/步骤

  1. 1

    写html结构，构建一个有滚动条的页面

    原生javascript实现页面触底加载更多
    原生javascript实现页面触底加载更多
  2. 1
    本页面未经许可获取自百度经验
  3. 2

    编写js，添加给window对象添加onscroll事件，解释都在注释里了，浅显易懂，这里需要解释的是：有些人会问获取高度的那几行为什么有两种写法，其实这是浏览器兼容性的问题，不同浏览器都是不一样的，所以大家试的时候要先测一下

    原生javascript实现页面触底加载更多
  4. 3

    可以看到当滚动到底部的时候，i不断加加，当然这只是例子，里面可以写很多的业务逻辑，例如ajax请求等。

    原生javascript实现页面触底加载更多
    END

注意事项

  • 希望可以帮到大家，力求用原生实现效果
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部
相关标签JAVASCRIPTHTML