⽹页上怎么实现按钮加载更多功能
平⽇使⽤今⽇头条较多，在思考⼀个问题：怎么下翻时实现信息⾃动加载呢。在html中，有时也需要实现⽹页"加载更多"功能，来按需求加载显⽰更多数据给⽤户，这样界⾯更加亲和和快速。今晚值班来实验⼀番！
1、滚动条简单实现功能。
此⽅法需要⼿动拉动滚动条，⽽且内容⼀次性展⽰。
<div >
</div>
div 内容的⾼度⼤于 300px 就会出现垂直滚动条，⼩于 300px 就没有滚动条。如果宽度⼤于 200px 会出现⽔平滚动条，⼩于就没有。
也可以只设置垂直滚动条
<div ></div>
⽔平滚动条
<div ></div>
2、JS实现按钮点击加载
<div id="box"></div>
<button id="btn">加载更多</button>
JS代码，不断加载data⾥⾯的数据。
var data = ["55", "55", "77", "77", "88", "dd88d", "eee", "777", "888", "999", "10", "11"];
var nums = 4;
var curr = 1;
var render = function(curr) {
var str = '',
last = curr * nums - 1;
last = last >= data.length ? (data.length - 1) : last;
for (var i = (curr * nums - nums); i <= last; i++) {
str += '<li>' + data[i] + '</li>';
}
return str;
};
var boxDom = ElementById("box");
boxDom.innerHTML = render(curr);
curr++;
boxDom.innerHTML += render(curr);
if (curr > 3) {
curr = 3;
alert("没有更多了");
}
js控制滚动条}
3、开源代码实现加载更多
3.1基于按钮实现加载更多，点击下加载更多，没有更多则隐藏加载更多按钮
函数getData(pageStart, pageSize)；从服务器循环读取json数据，append到div⾥⾯。可以在github上下载查看例程。和第⼆种⽅式类似，只是循环ajax读取服务器JSON数据，节省带宽。
3.2基于滚动事件实现加载更多
当滚动到最底部以上100像素时， 加载新内容，核⼼代码如下
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
这⾥⾯还有要优化的地⽅，如何防⽌滚动过快，服务端没来得及响应造成多次请求。
3.3优化后loadmore.js综合实例
实例默认使⽤滚动事件实现加载更多，当显⽰数⽬太⼩不⾜以触发向下滚动加载更多的逻辑时，使⽤加载更多点击事件。
<script src="js/loadmore.js"></script>
具体代码就不附上了，可去github上下载按照例程使⽤。1click，2crroll，3better分别对应上⾯三种⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。