<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>實現(xiàn)滾動加載</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) {
// 觸發(fā)加載數(shù)據(jù)
loadMore();
}
});
// 渲染數(shù)據(jù)
function loadMore() {
var content = '這是數(shù)據(jù)<br/>';
var node = document.getElementById('news');
// 向節(jié)點內(nèi)插入新生成的數(shù)據(jù)
var oldContent = node.innerHTML;
node.innerHTML = oldContent + content;
}
</script>
</body>
</html>
上面代碼是一個下拉自動加載數(shù)據(jù)的，主要是加載var content='這里面的數(shù)據(jù)';但是我總不能把數(shù)據(jù)寫死吧，我有個data.json的數(shù)據(jù)文件我想把data.json的數(shù)據(jù)加載在var content='';中,并且每向下拉一下，就加載一個id的數(shù)據(jù)
data.json
[
{
"id":"001",
"title":"百度",
"url":"http://www.baidu.com"
},
{
"id":"002",
"title":"阿里",
"url":"www.alibaba.com"
},
{
"id":"003",
"title":"騰訊",
"url":"www.qq.com"
}
]
這個代碼應(yīng)該如何完善？
如何把json數(shù)據(jù)加載到j(luò)s變量中？
繁華開滿天機(jī)
2019-03-06 03:44:11
