javascript - 在无限滚动上显示有限数量的项目
问题描述
避免使用https://infinite-scroll.com/在 HTML 页面中显示 json 中的所有项目
我正在尝试使用 jquery 插件 Infinite Scroll 来构建我的单页 Web 应用程序,但是存储在 json 文件中的所有元素同时显示在我的 html 页面中,当我单击查看更多按钮时显示继续从头开始重新加载元素
我如何限制每页或每次单击加载更多按钮时显示的元素数量
HTML 代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<div class="grid">
<div class="grid__col-sizer"></div>
<div class="grid__gutter-sizer"></div>
</div>
<p>
<button class="view-more-button">View more</button>
</p>
<!-- .photo-item template HTML -->
<script type="text/html" id="photo-item-template">
<div class="photo-item">
<img class="photo-item__image" src="{{Images.URL}}" />
<p class="photo-item__caption">
</p>
</div>
</script>
Javascript代码
var $grid = $('.grid').masonry({
itemSelector: '.photo-item',
columnWidth: '.grid__col-sizer',
gutter: '.grid__gutter-sizer',
percentPosition: true,
stagger: 30,
visibleStyle: {
transform: 'translateY(0)',
opacity: 1
},
hiddenStyle: {
transform: 'translateY(100px)',
opacity: 0
},
});
//------------------//
// Get an API key for your demos at https://unsplash.com/developers
// var unsplashID = '9ad80b14098bcead9c7de952435e937cc3723ae61084ba8e729adb642daf0251';
// get Masonry instance
var msnry = $grid.data('masonry');
$grid.infiniteScroll({
path: function() {
return 'data-amz.json';
},
// load response as flat text
responseType: 'text',
outlayer: msnry,
history: true,
button: '.view-more-button',
// load pages on button click
scrollThreshold: false,
// disable loading on scroll
// nicer reveal transition
});
$grid.on('load.infiniteScroll', function(event, response) {
// console.log(response)
// parse response into JSON data
var data = JSON.parse(response);
// compile data into HTML
var itemsHTML = data.Product.map(getItemHTML).join('');
var $items = $(itemsHTML);
// append item elements
$items.imagesLoaded(function() {
$grid.infiniteScroll('appendItems', $items)
.masonry('appended', $items);
})
});
// load initial page
$grid.infiniteScroll('loadNextPage');
//------------------//
var itemTemplateSrc = $('#photo-item-template').html();
function getItemHTML(photo) {
return microTemplate(itemTemplateSrc, photo);
}
// micro templating, sort-of
function microTemplate(src, data) {
// replace {{tags}} in source
return src.replace(/\{\{([\w\-_\.]+)\}\}/gi, function(match, key) {
// walk through objects to get value
var value = data;
key.split('.').forEach(function(part) {
value = value[part];
});
return value;
});
}
JSON数据
{
"Product": [
{
"Key": {
"Key": "Value"
}
},
{
"Key": {
"Key": "Value"
}
},
{
"Key": {
"Key": "Value"
}
}
]
}
解决方案
推荐阅读
- javascript - 如果存在则更新对象内部的数组,否则将数组推送到对象
- java - 本地通知不显示 CodeNameOne
- java - 来自 Xamarin Android 项目的 JAR API -> Java.Lang.NullPointerException
- c++ - 正确读取 .wav 文件中的样本
- java - setRotation 改变 ImageView 的位置
- python - FileNotFoundError:6 个泄漏的信号量对象在关机时清理
- c++ - 嵌套 for 循环和 Verlet 列表优化 C++
- java - 如何使用 OBD2 从 Ioniq EV 获取 BMS 数据?
- go - goLang 中的 UDP 数据包创建
- python - 尝试使用 Selenium 访问下拉菜单时出现“webelement 对象不可迭代”