我要评论下拉刷新：
html:
<div class="page-content ptr-content">
<%--下拉刷新图标--%> <div class="ptr-preloader"> <div class="preloader"></div> <div class="ptr-arrow"></div> </div> <div class="page-content" style="padding-top:0px"> <div class="card"> <div class="card-footer"><span style="color: #cc0000">案例1</span> </div> </div> <div class="card"> <div class="card-footer"><span style="color: #cc0000">案例2</span> </div> </div> </div> </div>
js:
<script>
return {
on: {
pageinit: function (e, done) {
$('.ptr-content').on('ptr:refresh', function (e) {
//此处编写刷新逻辑代码
console.log("开始刷新");
settimeout(function () {
console.log("结束");
app.ptr.done();
}, 1000);
});
}
}
}
</script>
无限滚动：
html：
<%--无限滚动容器--%>
<div class="page-content infinite-scroll-content">
<div class="simple-list">
<div class="card">
<div class="card-footer"><span style="color: #cc0000">案例1</span>
</div>
</div>
<div class="card">
<div class="card-footer"><span style="color: #cc0000">案例2</span>
</div>
</div>
<div class="card">
<div class="card-footer"><span style="color: #cc0000">案例3</span>
</div>
</div>
<div class="card">
<div class="card-footer"><span style="color: #cc0000">案例4</span>
</div>
</div>
</div>
<%--预加载器--%>
<div class="preloader infinite-scroll-preloader"></div>
</div>
js：
<script>
return {
on: {
pageinit: function (e, done) {
var allowinfinite = true;//加载标志
var lastitemindex = $('.simple-list div[class="card"]').length;//现有加载量
var maxitems = 200;//最大加载量
var itemsperload = 5;//每次加载量
//滚动事件处理程序
$('.infinite-scroll-content').on('infinite', function () {
if (!allowinfinite) return;// 如果正在加载，退出
console.log("当前数量：" + lastitemindex);
allowinfinite = false;//设置加载标志
//模拟1秒加载
settimeout(function () {
//设置正在加载标志
allowinfinite = true;
if (lastitemindex >= maxitems) {
app.infinitescroll.destroy('.infinite-scroll-content');//没有更多可加载项，销毁加载事件，防止不必要加载
$('.infinite-scroll-preloader').remove(); //删除预紧器
return;
}
//生成新html
var html = '';
for (var i = lastitemindex + 1; i <= lastitemindex + itemsperload; i++) {
html += '<div class="card">';
html += '<div class="card-footer">';
html += '<span style="color: #cc0000">案例' + i + '</span>';
html += '</div>';
html += '</div>';
}
$('.simple-list').append(html); //绑定
lastitemindex = $('.simple-list div[class="card"]').length; //更新最近索引
console.log("加载后数量：" + lastitemindex);
}, 1000);
});
}
}
}
</script>
解释：
pageinit: function (e, done) {} 代表文档就绪函数
$('.ptr-content').on('ptr:refresh', function (e) {} 代表class为“ptr-content”的div下拉刷新事件（ptr：refresh是下拉刷新事件）
$('.infinite-scroll-content').on('infinite', function () {} 代表class为“infinite-scroll-content”的div滚动事件（infinite是滚动事件）
如有问题，欢迎留言
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论