1 <!-- 显示15条数据 --> 2 <ul class="list" pagesize="15"> 3 ????<li> 4 ????????<div class=""> 5 ????????????<img v-bind:src="" ?/> 6 ????????</div> 7 ????</li> 8 <li>...</li> 9 <li>...</li>10 ....11 </ul>
1，先在ul显示设置15条的数据，pagesize="15";然后插入下面的jq代码即可，不过这貌似不是懒加载的样子，而是隐藏了后面的列表，点击再才又加载多15条数据。
1 <!-- 显示更多 --> 2 <script type="text/javascript"> 3 ????(function () { 4 ????????var showMoreNChildren = function ($children, n) { 5 ????????????//显示某jquery元素下的前n个隐藏的子元素 6 ????????????var $hiddenChildren = $children.filter(":hidden"); 7 ????????????var cnt = $hiddenChildren.length; 8 ????????????for (var i = 0; i < n && i < cnt ; i++) { 9 ????????????????$hiddenChildren.eq(i).show();10 ????????????}11 ????????????return cnt - n;//返回还剩余的隐藏子元素的数量12 ????????}13 ?????14 ????????$.showMore = function (selector) {15 ????????????if (selector == undefined) { selector = ".list" }16 ????????????//对页中现有的class=list的元素，在之后添加显示更多条，并绑定点击行为17 ????????????$(selector).each(function () {18 ????????????????var pagesize = $(this).attr("pagesize") || 10;19 ????????????????var $children = $(this).children();20 ????????????????if ($children.length > pagesize) {21 ????????????????????for (var i = pagesize; i < $children.length; i++) {22 ????????????????????????$children.eq(i).hide();23 ????????????????????}24 ?????25 ????????????????????$("<button class=‘more‘ >显示更多 >>></button>").insertAfter($(this)).click(function () {26 ????????????????????????if (showMoreNChildren($children, pagesize) <= 0) {27 ????????????????????????????//如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”28 ????????????????????????????$(this).hide();29 ????????????????????????};30 ????????????????????});31 ????????????????}32 ????????????});33 ????????}34 ????})();35 ????36 ????//调用显示更多插件。参数是标准的 jquery 选择符 37 ????$.showMore("list");38 </script>类似懒加载的js功能
原文地址：https://www.cnblogs.com/pyspang/p/8430997.html