首页 > 软件开发 > HTML >

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

来源:互联网 2023-03-16 19:07:31 280

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

工具/原料

  • 编辑器Hbuilder
  • html javascript

方法/步骤

  • 1

    写html结构,构建一个有滚动条的页面alr办公区 - 实用经验教程分享!

    原生javascript实现页面触底加载更多alr办公区 - 实用经验教程分享!

    原生javascript实现页面触底加载更多alr办公区 - 实用经验教程分享!

  • 1本页面未经许可获取自百度经验
  • 2

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

    原生javascript实现页面触底加载更多alr办公区 - 实用经验教程分享!

  • 3

    可以看到当滚动到底部的时候,i不断加加,当然这只是例子,里面可以写很多的业务逻辑,例如ajax请求等。alr办公区 - 实用经验教程分享!

    原生javascript实现页面触底加载更多alr办公区 - 实用经验教程分享!

  • 注意事项

    • 希望可以帮到大家,力求用原生实现效果

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!alr办公区 - 实用经验教程分享!


    标签: JAVASCRIPTHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码