<!DOCTYPE html><html><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贡献1875条经验 获得超3个赞
ajax正解，比如用jQuery就可以这：
// 假设你的data.json就在网站test目录下：
$.getJSON("/test/data.json", function(data){
content = data;
// 然后继续用content就行了
})
// 注意不要在这里用content，要在上面那个function里面（因为$.getJSON是异步的）
SMILET
TA贡献1796条经验 获得超4个赞
定义一个id值，每次下拉的时候执行json数据循环，找出id+1对应的数据就可以了啊！
var data = json中的数据，然后foreach一下就行。
慕码人8056858
TA贡献1803条经验 获得超6个赞
不管是上拉还是下拉，处理下防抖
json的话就用ajax拉，可以直接写相对地址，后台上线以后换下url加点data限定下要拉的数据(比如可以传最后一个id和拉取数量)就行了
如果就是本地需求（比如就是个年会抽奖或者是直接在你本机展示的原型，还不看代码那种），可以直接写成js，然后里边加个变量名比如
var data之类的，然后你直接加载这个js用这个变量就好
添加回答
举报
0/150
提交
取消