html5 下拉分页 自动加载更多,HTML5 WebApp开发(二)表格上拉加载更多下拉刷新

开始

在《Swift 集成Alamofire/Kingfisher/MJRefresh/MBProgressHUD的小项目》利用showAPI上的接口，做了一个上下拉的小Demo。之后就没有什么时间搞Swift了，这个月发表博客的数量也没有上个月多了。这个月使用HBuild搞WebApp,不管App怎样，也总算是学了一些东西。昨天周日一天没有出门，就自己新建了一个小的WebApp的项目，昨天就把代码敲好了，昨天的第一篇《 HTML5 WebApp开发(一)新建项目》，但是没时间写第二篇博客，今天下班后就接着写第二篇。

关于表格的上下拉，个人感觉没有什么好写的，贴贴代码，以后遇见类似的就这么套就是了。但是在实际使用中还是有些问题：1.真机调试时安卓机的流畅度就没有苹果机的好，2.不知道是否有cell的重用，上拉的时候就在那里一直的appendChild。

效果图

为什么MarkDown不能设置图片大小呢？

代码

请求和样式都在一个html文件里面：

消息

' + item.date + '

' + '

' + item.title + '

'; table.appendChild(li, table.firstChild); }); if(pageIndex < allPages){ mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); /*能上拉*/ }else{ mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);/*不能上拉*/ } } }, error: function(xhr, type, errerThrown) { mui.toast('网络异常,请稍候再试'); plus.nativeUI.closeWaiting(); mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); } }); }); } // 获取当前时间 yyyyMMddHHmmss function getDataStr(){ var date = new Date(); var year = date.getFullYear(); var mouth = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); if(mouth < 10){ /*月份小于10 就在前面加个0*/ mouth = String(String(0) + String(mouth)); } var currentDate = String(year) + String(mouth) + String(day) + String(hour) + String(minute) + String(second); return currentDate; } //链接批量处理 页面跳转 var aniShow = "pop-in"; mui('.mui-content').on('tap', 'li', function() { console.log("detail-url -- >> " + this.url); console.log("detail-title -- >> " + this.title); mui.openWindow({ url: 'detail.html', id: 'detail', show: { duration: 200, }, waiting: { autoShow: true }, extras: { detailUrl: this.url, detailTitle: this.title }, }); });

思路

代码里面有注释，大致思路：

1.做一个刷新的容器；

2.加上一个可以上下滑动的scroll；

3.创建table;

4.创建cell；

5.等把cell的样式做好了就就可以把cell的代码注释掉，然后在请求回来数据的时候再写一次，只是这次是使用的网络数据。

关于上下拉

关于上下拉，其实也就是一些固定的思路，之前在写原生的iOS表格上下拉的时候基本也是一些固定的思路和方法。上下拉的思路和方法，可以看看《HTML5 WebApp开发(一)新建项目》提到的模板项目的目录examples/pullrefresh_sub.html这个html文件，只是这里我们使用的网路数据。

注意点

1.在下拉刷新的时候我们需要先清空使用table.innerHTML = ”;清空一下表格。关于在什么时候调用清空的方法，在代码里面有说明；

2.分页的处理，分页的处理基本和原生iOS开发时一样，无非就是判断当前页码是否是最后一页，最后一页的时候就不可以上拉了；

提高点

页面数据需要做缓存，在没有网络的时候，如果没有缓存，那么这个页面就空白的，这样的用户体验并不好。关于加缓存的问题，等有时间继续写这个代码的时候在来加。

最后

代码下载地址：请点击我！