无限滚动无法实现问题

将SUI的无限滚动 js 源码复制到项目中，并没有实现无限滚，控制台并没有出现异常信息，经多次测试发现，每次执行到

$(document).on('infinite','.infinite-scroll-bottom',null,function() {｝函数时就进入了zepto.min.js，

$(document).on('infinite','.infinite-scroll-bottom',null,function() {｝函数内的所有方法都无法执行。很苦恼。。。

以下是源码：

// 加载flag
var loading = false;
// 最多可加载的条目
var maxItems = 10;

// 每次加载添加多少条目
var itemsPerLoad = 5;

function addItems(number, lastIndex) {
// 生成新条目的HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
html +='<div class="card">\n' +
' <div class="card-header">新的公布:</div>\n' +
' <div class="card-content">\n' +
' <div class="list-block media-list">\n' +
' <ul class="list-blocker">\n' +
' <li class="item-content">\n' +
' <div class="item-media">\n' +
' <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">\n' +
' </div>\n' +
' <div class="item-inner">\n' +
' <div class="item-title-row">\n' +
' <div class="item-title">标题</div>\n' +
' </div>\n' +
' <div class="item-subtitle">子标题</div>\n' +
' </div>\n' +
' </li>\n' +
' </ul>\n' +
' </div>\n' +
' </div>\n' +
' <div class="card-footer">\n' +
' <span>2015/01/15</span>\n' +
' <span>5 评论</span>\n' +
' </div>\n' +
' </div> \n' +
'</div>';
}
// 添加新条目
$('.infinite-scroll-bottom .list-container').append(html);
}

//预先加载5条
addItems(itemsPerLoad, 0);

// 上次加载的序号
var lastIndex = 5;

console.log("infinite运行前：");
// 注册'infinite'事件处理函数
$(document).on('infinite','.infinite-scroll-bottom',null,function() {
console.log("infinite正在运行：")
// 如果正在加载，则退出
if (loading) return;

// 设置flag
loading = true;

// 模拟1s的加载过程
setTimeout(function() {
// 重置加载flag
loading = false;

if (lastIndex >= maxItems) {
// 加载完毕，则注销无限加载事件，以防不必要的加载
$.detachInfiniteScroll($('.infinite-scroll'));
// 删除加载提示符
$('.infinite-scroll-preloader').remove();
return;
}

// 添加新条目
addItems(itemsPerLoad, lastIndex);
// 更新最后加载的序号
lastIndex = $('.list-container li').length;
//容器发生改变,如果是js滚动，需要刷新滚动
$.refreshScroller();
}, 1000);
});
console.log("infinite运行后：")

超人迪加123 2020-05-06

源自：项目：校园商铺-商品管理及前台展示 3-5 店铺列表页前端的开发上

收起

5回答

好帮手慕阿满 2020-05-08 19:38:27

同学你好，直接测试同学代码，显示的标题，子标题等内容，如：

没有显示item内容，问一下同学是如何测试的，是否是根据老师的步骤完成的呢，如果不是，建议同学根据老师的内容一步一步完成。

祝：学习愉快~

收起回答

提问者超人迪加123 #1

感谢老师这么用心，目前并没有发现问题出在什么地方，这个问题我后面再回来处理，暂时先跳过。谢谢老师

2020-05-08 21:48:00
好帮手慕柯南回复提问者超人迪加123 #2

好的同学，如果遇到问题可以继续提问。祝学习愉快

2020-05-09 10:42:04

好帮手慕阿满 2020-05-08 14:06:21

同学你好，这边无法测试同学代码。问一下同学是从后台读取数据的吗？能查询到更多的数据吗？

祝：学习愉快!

收起回答

提问者超人迪加123 #1

SUI官网上的无限滚动源码是生成20条item，我没有从后台获取数据，而是直接复制SUI上的无限滚动源码（包含js和html），而SUI官网上可以正常无限滚动，但复制到我项目中的源码却无法滚动生成20条item。

2020-05-08 16:48:42

好帮手慕阿满 2020-05-07 11:50:59

同学你好，建议同学将如下的maxItems的值增加到100再试试。

祝：学习愉快~

收起回答

提问者超人迪加123 #1

尝试过改为100了，把源码直接复制进来，也不行。

2020-05-07 23:28:46

提问者超人迪加123 2020-05-06 22:46:28

老师您好，控制台没有任何提示，但下拉到第20条item时，就只有那个加载提示，并不会出现新的item。

下面是html源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商家列表</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

<link rel="stylesheet"
href="/resources/css/shopList.css">

</head>
<body>
<div class="page-group infinite-scroll infinite-scroll-bottom" data-distance="100">
<div class="page page-current">
<header class="bar bar-nav" style="padding-top: 8px;">

<div class="row">
<div class="col-33" style="padding-top: 5px;">
<a class="black" style="color: grey;" href="#">返回</a>
</div>
<div class="col-33" style="text-align: center;font-size: 1rem">商家列表</div>
<div class="col-33" style="color: grey;"></div>
</div>
</header>

<div class="bar bar-header-secondary">
<div class="searchbar">
<a href="#" class="searchbar-cancel">搜索</a>
<div class="search-input">
<label class="icon icon-search" for="search"></label>
<input type="search" id='search' placeholder='输入关键字...'/>
</div>
</div>
</div>

<nav class="bar bar-tab">
<a class="tab-item external active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">首页</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-me"></span>
<span class="tab-label">文案</span>
<span class="badge">2</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-star"></span>
<span class="tab-label">收藏</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-cart"></span>
<span class="tab-label">文案</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-settings"></span>
<span class="tab-label">设置</span>
</a>
</nav>

<div class="content">
<div class="content-padded">

<div class="row shopCategoryList">
<p class="col-33"><a href="#" class="button shopCategory">全部类别</a></p>
</div>

<div class="item-input">
<input type="hidden" id="area_picker_value" value=""/>
<input type="text" value="所有街道" id='area_picker' placeholder="所有街道"/>
</div>


<div class="infinite-scroll infinite-scroll-bottom" data-distance="100">
<div class="list-block">
<ul class="list-container">
</ul>
</div>

<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>

</div>
</div>
</div>
</div>

<script type='text/javascript'
src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>


<script type='text/javascript'
src='../resources/js/shopList.js' charset='utf-8'></script>
<script type='text/javascript'
src='../resources/js/infinite-scroll.js' charset='utf-8'></script>
<script type='text/javascript'
src='../resources/js/common/common.js' charset='utf-8'></script>
</body>
</html>