<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>实现滚动加载</title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
li, ul {
list-style: none;
}
.container {
width: 980px;
height: 600px;
margin: 0 auto;
overflow: auto;
}
.news__item {
height: 80px;
margin-bottom: 20px;
border: 1px solid #eee;
}
</style>
</head>
<body>
<div class="container">
<ul class="news" id="news">
<li class="news__item">1、hello world</li>
<li class="news__item">2、hello world</li>
<li class="news__item">3、hello world</li>
<li class="news__item">4、hello world</li>
<li class="news__item">5、hello world</li>
<li class="news__item">6、hello world</li>
</ul>
</div>
<script>
var wrapper = document.querySelector('.container')
var container = document.querySelector('.news')
wrapper.addEventListener('scroll', function() {
var scrollTop = wrapper.scrollTop;
if (scrollTop + wrapper.clientHeight >= container.clientHeight) {
// 触发加载数据
loadMore();
}
});
// 渲染数据
function loadMore() {
var content = '这是数据<br/>';
var node = document.getElementById('news');
// 向节点内插入新生成的数据
var oldContent = node.innerHTML;
node.innerHTML = oldContent + content;
}
</script>
</body>
</html>
上面代码是一个下拉自动加载数据的，主要是加载var content='这里面的数据';但是我总不能把数据写死吧，我有个data.json的数据文件我想把data.json的数据加载在var content='';中,并且每向下拉一下，就加载一个id的数据
data.json
[
{
"id":"001",
"title":"百度",
"url":"http://www.baidu.com"
},
{
"id":"002",
"title":"阿里",
"url":"www.alibaba.com"
},
{
"id":"003",
"title":"腾讯",
"url":"www.qq.com"
}
]
这个代码应该如何完善？
5 回答
江户川乱折腾
TA贡献1851条经验 获得超5个赞
ajax正解，比如用jQuery就可以这：
// 假设你的data.json就在网站test目录下：
$.getJSON("/test/data.json", function(data){
content = data;
// 然后继续用content就行了
})
// 注意不要在这里用content，要在上面那个function里面（因为$.getJSON是异步的）
狐的传说
TA贡献1804条经验 获得超3个赞
定义一个id值，每次下拉的时候执行json数据循环，找出id+1对应的数据就可以了啊！
var data = json中的数据，然后foreach一下就行。
慕后森
TA贡献1802条经验 获得超5个赞
- 不管是上拉还是下拉，处理下防抖
- json的话就用ajax拉，可以直接写相对地址，后台上线以后换下url加点data限定下要拉的数据(比如可以传最后一个id和拉取数量)就行了
- 如果就是本地需求（比如就是个年会抽奖或者是直接在你本机展示的原型，还不看代码那种），可以直接写成js，然后里边加个变量名比如
var data之类的，然后你直接加载这个js用这个变量就好
- 5 回答
- 0 关注
- 520 浏览
添加回答
举报
0/150
提交
取消