栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript > Ajax教程

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

Ajax教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷。

当然本例子采用的是jquery库,后期会做成原生js。
本例的数据调用的是锋利的jquery一书提供的一段json。

首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height();
再给window绑定scroll事件。所以整个页面demo可以这样做:
复制代码 代码如下:






* { margin:0; padding:0;}
body { font-size:12px;}
p{ margin: 5px;}
.box{ padding: 10px;}






往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉

往下拉







拉到底部就是实现异步数据加载了,当然了,实际项目还要加上如果没数据了要怎么显示,怎么操作。这些加判断就行了。
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/128838.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号