angularjs+ionic的app端分页和条件
2018-06-24 01:55:51来源：未知 阅读 ()
做app项目积分商城的商品列表需要分页显示
实现：
ionic滚动条：ion-scroll 用于创建一个可滚动的容器。
附：菜鸟教程：http://www.runoob.com/ionic/ionic-scroll.html
隶属于ionContent 或 ionScroll，要写在ion-content才有效
ion-infinite-scroll
当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。
当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。
ion-refresher
允许你添加下拉刷新滚动视图。
<!-- <ion-refresher> 下拉刷新指令 --> <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()"></ion-refresher> <!-- ion-infinite-scroll 上拉加载数据指令 distance默认1% nf-if的值为false时，就禁止执行on-infinite --> <ion-infinite-scroll ng-if="moredata" on-infinite="loadMore()" distance="1%" ></ion-infinite-scroll>
1. on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast('scroll.refreshComplete');
2. on-infinite 上拉触发的函数 同样需要广播事件结束 $scope.$broadcast('scroll.infiniteScrollComplete');
js代码：
1 //加载更多 2 // $scope.items = []; 3 //无限加载 4 $scope.moredata = true; 5 6 var sName = "''";//初始化搜索条件，默认 7 var currentPage = 0;//初始化页码 8 var intData = [];//初始化数组 9 10 //搜索事件 11 $scope.search = function() { 12 if($scope.searchName != undefined && $scope.searchName != "" && $scope.searchName != null) { 13 sName = $scope.searchName; 14 currentPage = 0; 15 // intData = []; 16 intData.splice(0,intData.length);//清空数组 17 $scope.loadMore(); 18 } 19 } 20 21 //下拉刷新 22 $scope.doRefresh = function() { 23 currentPage = 1; 24 intData = []; 25 $scope.moredata = true; 26 // $scope.loadMore(); 27 HttpRequest.query("jdApi/commodity/getCommodityList/" + currentPage + "/" + sName + "/''", true) 28 .success(function(objs) { 29 var result = angular.fromJson(objs.jdBaseMsgBean.result); 30 31 //获取数据，在原来的数据基础上追加信息 32 var lists = intData; 33 if(lists.length > 0 ){ 34 intData = new Array().concat(lists, result.data); 35 }else{ 36 intData = result.data; 37 } 38 $scope.gifts = intData; 39 40 if(result.totalRecord <= currentPage*result.pageSize) { 41 $scope.moredata = false; 42 } 43 //自动请求后台多次问题解决 44 $timeout(function () { 45 $scope.$broadcast('scroll.refreshComplete'); 46 }, 1000); 47 }); 48 49 } 50 51 //上拉加载 52 $scope.loadMore = function() { 53 // $http.get('/more-items').success(function(items) { 54 // useItems(items); 55 // $scope.$broadcast('scroll.infiniteScrollComplete'); 56 // }); 57 currentPage += 1; 58 HttpRequest.query("jdApi/commodity/getCommodityList/" + currentPage + "/" + sName + "/''", true) 59 .success(function(objs) { 60 var result = angular.fromJson(objs.jdBaseMsgBean.result); 61 62 //获取数据，在原来的数据基础上追加信息 63 var lists = intData; 64 if(lists.length > 0 ){ 65 intData = new Array().concat(lists, result.data); 66 }else{ 67 intData = result.data; 68 } 69 $scope.gifts = intData; 70 71 if(result.totalRecord <= currentPage*result.pageSize) { 72 $scope.moredata = false; 73 } 74 // if(result.totalPage == currentPage) { 75 // $scope.moredata = false; 76 // } 77 // if(result.data.length < result.pageSize){ 78 // $scope.moredata = false; 79 // } 80 81 // $scope.$broadcast('scroll.infiniteScrollComplete'); 82 //自动请求后台多次问题解决--ionic 上拉刷新 ion-infinite-scroll 自动调用多次问题解决 83 timer = $timeout(function () { 84 $scope.$broadcast('scroll.infiniteScrollComplete'); 85 }, 1000); 86 }); 87 } 88 89 $scope.$on('$stateChangeSuccess', function() { 90 $scope.loadMore(); 91 }); 92 93 $scope.$on("$destroy", function () { 94 //清除配置,不然scroll会重复请求 95 $timeout.cancel(timer); 96 });
说明：
1.moredata，页面用ng-if="moredata"，来判断是否加载数据。当滚动条到底部，并且服务器没有数据的时候，使用ng-if指令来控制便签是否存在，即，是否继续向服务器发送请求（如果没有这个功能，会不停的向服务器发送请求）。
2.$scope.$on上的$stateChangeSuccess和$destroy，目前没用到，加上或不加暂时没有影响。
3.HttpRequest.query("jdApi/commodity/getCommodityList/" + currentPage + "/" + sName + "/''", true)是service层封装的$http服务，如下
1 query: function(url, isLoad){ 2 if(isLoad){ 3 Prompt.showLoading(); 4 } 5 var params = {"rd": angular.randomCode()}; 6 var http = $http({ 7 method: 'QUERY', 8 params: params, 9 url: $rootScope.url.app + 'services/' + url, 10 timeout:90000 11 }); 12 http.error(function(data, status, headers, config){ 13 showError(status); 14 }); 15 http.finally(function(){ 16 if(isLoad){ 17 Prompt.hideLoading(); 18 } 19 }); 20 return http; 21 }
html代码：
1 <ion-content class="divider-bg box-content" style=""> 2 <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher> 3 <ion-list> 4 <ion-item class="item-thumbnail-left item-thumbnail-left-custom item-icon-right" ng-repeat="g in gifts" href="#/tab/my/jifen/gift/{{totalScore}}/{{g.id}}"> 5 <img class="img-48 media-object pull-left" ng-src="http://img13.360buyimg.com/n4/{{g.imagePath}}" alt="{{g.name}}"> 6 <h2>{{g.name}}</h2> 7 <div class="shop-pro-list"> 8 <span class="shop-pro-list-scores"><span class="color-org">{{g.price}}</span>{{'jifen.jifen' | i18next}}</span> 9 <span><i class="exchange-btn">{{'jifen.exchangeNow' | i18next}}</i></span> 10 </div> 11 </ion-item> 12 </ion-list> 13 <ion-infinite-scroll ng-if="moredata" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll> 14 </ion-content>
搜索的代码：
<button class="button button-small button-search-jd" on-tap="search()">{{'jifen.search' | i18next}}</button>
解释：on-tap为ionic事件（手势轻击事件）
ionic手势事件：http://www.runoob.com/ionic/ionic-gesture-event.html
起初使用ng-click，但事件不起作用，通过查找发现：直接在ion-list中的ion-item中并不能触发ng-click事件，可以在item中的元素上再套一层div。
Ionic 常见问题及解决方案：https://www.jianshu.com/p/b567cc657a49
注：分页参考文档
https://blog.csdn.net/jslcylcy/article/details/76633635
https://www.cnblogs.com/dreamowneryong/p/4969264.html
ionic 上拉刷新 ion-infinite-scroll 自动调用多次问题解决
加入定时器timer：https://blog.csdn.net/chenhua4088/article/details/49929279
ionic 的下拉刷新 与 上拉加载：https://www.cnblogs.com/ailen226/p/4626166.html
列表展示页面，分页数据进行追加：http://hbiao68.iteye.com/blog/2295161
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：js深度复制对象
- web如何实现页面分页打印 2020-02-14
- JavaScript中的apply和call函数详解 2020-01-07
- 分享nodejs分页类代码 2019-12-02
- manifest.json 解析--手机web app开发笔记（三-2) 2019-08-14
- page分页问题，根据页码获取对应页面的数据，接口调用 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
