mui上拉加载功能实例详解

前端之家收集整理的这篇文章主要介绍了mui上拉加载功能实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在做移动端的项目,用到了mui的上拉加载,整理如下:

1、需要引入的css、js

2、静态页的dom结构

3、静态页面 js对应的代码

atanum=12;//获取数据总数 var pageSize=3;//每页显示条数 var counter=1;//计数器 var pageStart=0;//开始数据条数 getData(pageStart,pageSize); function getData(pageStart,pageSize){ //显示数不足每页显示条数 if(datanum-pageStart=datanum){ data(pageStart,pageSize); console.log("没有更多数据了"); //没有更多数据了 }else{ data(pageStart,pageSize); console.log("显示datanum"+datanum+"pageSize"+pageSize+"pageStart"+pageStart); //显示 } } function data(pageStart,pageSize){ //业务 var result=""; for(var i=pageStart;i<(pageStart+pageSize);i++){ result+='
'+ ''+ ''+ ''+ '
'+ '
'+ '
'+ '
' } console.log(jQuery); jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view'); } /** * 上拉加载具体业务实现 */ function pullupRefresh() { setTimeout(function() { var flag=counter++<(dataNum/pageSize) console.log(dataNum/pageSize); mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag)); //参数为true代表没有更多数据了。 var scroll = document.body.querySelector('.mui-scroll .mui-table-view'); var item = document.body.querySelectorAll('.goode-msg'); console.log(counter); if(flag){ console.log(counter); pageStart=counter*pageSize; data(pageStart,pageSize); } },1500); } })();

4、与服务端联调时 js做了改动,如下:

' + '元' + '' + 'ss' + '
' + '
' + '
' + '
' }); jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view'); } } ); } /** * 上拉加载具体业务实现 */ function pullupRefresh() { setTimeout(function () { mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。 data(); },1500); } })();

5、踩的坑

代码会不识别mui。

在jquery中,如果要给动态生成的节点绑定事件,以前要用live,现在用delegate或者on,原理是利用冒泡实现事件委托,也就是给生成节点的父节点预先绑定事件。

以上所述是小编给大家介绍的mui上拉加载功能实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/39993.html
mui上拉加载

猜你在找的JavaScript相关文章