背景
最近在做一个微信公众号的h5页面,使用Jquery Weui组件实现项目中需要的功能。做个笔记,方便后期使用。若有不好的地方,欢迎给出宝贵建议哦。
功能
滚动加载更多 [Jquery Weui]
本例中以
body
为参考对象,以下是代码的展示:
- html部分
<div id="list">
</div>
/*滚动加载 start*/
<div class="weui-loadmore" style="display: none;">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
/*滚动加载 end*/
复制代码
备注:
滚动加载
的代码块,放在要滚动加载的容器中,本例的滚动加载容器是:body
- js部分
$(document.body).infinite().on("infinite",function(){
if(dom.loading){
return;
}
$('.weui-loadmore').show();
dom.loading = true;
setTimeout(function(){
//parentDom = $('#list');
Loadmore.loadDom(parentDom,data);
$('#list').append('<p>我是新加载的内容</p>');
dom.loading = false; //销毁滚动插件
},1500);
}); //初始化加载滚动插件