移动端 H5 上拉刷新,下拉加载
2017-11-08 09:09
190 查看
http://www.mescroll.com/api.html#options
这里有几个重要的设置
1、down 下不启用下拉刷新是因为再手机端有默认的下拉刷新,会冲突,待解决
2、up 中的
auto 是第一次自动加载;
page是设置分页的size,一般num不在这里设置
clearEmptyId 是没有数据时显示提示无数据的容器Id
callback 是回调地址
//创建MeScroll对象 var mescroll = new MeScroll("mescroll", { down: { use: false }, up: { auto: true, page: { size: 5 }, clearEmptyId: "dataList", callback: upCallback //上拉加载的回调 } }); /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */ function upCallback(page) { //console.log("upCallback_num:" + page.num); var olddata = null; if (page.num !== 1) { olddata = $scope.orders; } $scope.searcher.Page = page.num; $scope.searcher.Rows = page.size; //console.log("Page:" + $scope.searcher.Page + "&Rows:" + $scope.searcher.Rows); $http.post(apiUrl + "api/weixintruck/getlist", $scope.searcher).success( function(data) { //console.log(data.data); if (data.code === 200) { if (data.data.TotalItem > $scope.searcher.CurrentPage * $scope.searcher.PageSize) { $scope.hasNextPage = true; } else { $scope.hasNextPage = false; } $scope.orders = data.data.Items; if (olddata !== null && typeof (olddata) !== "undefined") { $scope.orders = olddata.concat($scope.orders); } mescroll.endBySize($scope.orders.length, data.data.TotalItem); } else { layer.open({ content: '非法操作', skin: 'msg', time: 2 //2秒后自动关闭 }); mescroll.endErr(); } }).error(function() { mescroll.endErr(); }); }
相关文章推荐
- 关于移动端上拉加载下拉刷新我的的理解和做法
- 关于h5手机端上拉加载和下拉刷新效果-1
- iscroll 移动端上拉刷新 下拉加载 实例 !
- 使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能
- XRecyclerView实现RecyclerView下拉刷新上来加载 自己做了部分修改,使代码更简洁易用
- xlistview上拉刷新,下拉加载
- Android——Xlistview上拉刷新下拉加载
- 关于scroll的上拉刷新下拉加载
- okhhtp + recyclerview + 上拉刷新下拉加载 + 点击事件
- jQuery手机端上拉刷新下拉加载更多页面
- PullToRefresh 上拉刷新,下拉加载数据 框架的简单使用
- iScroll上拉刷新下拉加载更多demo,亲自实验过,体验比其它好
- 安卓,采用最简单易懂的方式实现上拉刷新下拉加载更多
- 使用Android开源工具PullToRefresh实现上啦刷新下拉加载
- Recycleview的上拉刷新与下拉加载
- RecyclerView上拉刷新下拉加载
- 上拉刷新下拉加载
- android上拉刷新下拉加载
- h5手机端下拉刷新效果
- 实现上拉刷新下拉加载的布局