使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能
* mescroll请参考官方文档
1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行)
代码如下:
var mescroll = new MeScroll('mescroll', { up: { use: false // 不配置上拉 }, down: { auto: false, htmlContent: ' ', // 下拉内容设为空 callback: function(ms) { console.log('down'); ms.endByPage(0, 0); // mescroll.endError() 效果一样//回掉为空, 结束页为空 } } });
2. 案列2: 使用上拉刷新功能, 下拉只提供效果
var mescroll = new MeScroll('mescroll', { up: { noMoreSize: 1, htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', htmlNodata: '<p class="upwarp-nodata">-- 没有数据啦 --</p>', callback: function(page, ms) { console.log('up');
// 业务代码部分 $scope.search($scope.condition, ms); } }, down: { auto: false, htmlContent: ' ', callback: function(ms) { console.log('down'); mescroll.endErr(); // 使用endError把下拉的效果关闭(内容回到原位), mescroll内部会自动恢复原来的页码,时间等变量 } } });
3. 使用上拉加载, 下拉重置刷新的功能:
var mescroll = new MeScroll('mescroll', { up: {// 只需要配置上拉刷新部分, mescrol会默认开启下拉刷新,并重置当前页为第一页,然后调用up.callback() noMoreSize: 1, htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', htmlNodata: '<p class="upwarp-nodata">-- 没有数据啦 --</p>', page: { // 要使用它提供的分页参数, 把分页功能托管给他 num : 0, size : $scope.pageInfos.size, time: null }, callback: function(page, ms) { // 获取回掉里的分页和mescroll实例 $scope.loadUncommitIssues(page, ms); // 传递分页对象和mescroll实例,进行业务代码操作 } } });