<!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)該如何完善？
5 回答
江戶川亂折騰
TA貢獻1851條經(jīng)驗 獲得超5個贊
ajax正解，比如用jQuery就可以這：
// 假設(shè)你的data.json就在網(wǎng)站test目錄下：
$.getJSON("/test/data.json", function(data){
content = data;
// 然后繼續(xù)用content就行了
})
// 注意不要在這里用content，要在上面那個function里面（因為$.getJSON是異步的）
狐的傳說
TA貢獻1804條經(jīng)驗 獲得超3個贊
定義一個id值，每次下拉的時候執(zhí)行json數(shù)據(jù)循環(huán)，找出id+1對應(yīng)的數(shù)據(jù)就可以了??！
var data = json中的數(shù)據(jù)，然后foreach一下就行。
一只名叫tom的貓
TA貢獻1906條經(jīng)驗 獲得超3個贊
先把data.json解析，再賦值給content，然后通過id值進行循環(huán)遍歷數(shù)據(jù)，每次下拉一下id就++；就可以了。。。
慕后森
TA貢獻1802條經(jīng)驗 獲得超5個贊
- 不管是上拉還是下拉，處理下防抖
- json的話就用ajax拉，可以直接寫相對地址，后臺上線以后換下url加點data限定下要拉的數(shù)據(jù)(比如可以傳最后一個id和拉取數(shù)量)就行了
- 如果就是本地需求（比如就是個年會抽獎或者是直接在你本機展示的原型，還不看代碼那種），可以直接寫成js，然后里邊加個變量名比如
var data之類的，然后你直接加載這個js用這個變量就好
- 5 回答
- 0 關(guān)注
- 542 瀏覽
添加回答
舉報
0/150
提交
取消