菜单

ionic的app端分页和条件,js_脚本之家

2020年3月25日 - 澳门太阳娱乐手机登录

在开辟web-app中,总会碰着v-for出来的li会有不菲,当数码达几百上千条的时候,一同加载出来会导致客户体验相当糟糕的成效。此时大家能够利用Infiniti滚动和下拉刷新来兑现调整突显的数额,当刷新到底层的疆界的时候会触发Infiniti滚动的事件,再一次加载一定数量的规规矩矩。

做app项目积分市肆的货品列表供给分页展现

实现:

  ionic滚动条:ion-scroll 用于创建二个可滚动的器皿。

  附:新手教程:

依然拿在品种中的效率来举栗子介绍。

    隶属于ionContent 或 ionScroll,要写在ion-content才有效

澳门太阳娱乐手机登录,ion-infinite-scroll

当客户达到页脚或页脚周围时,ionInfiniteScroll指令允许你调用一个函数 。

当客户滚动的间隔超越后面部分的内容时,就可以触发你钦定的on-infinite。

ionic的app端分页和条件,js_脚本之家。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’State of Qatar;

     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

      假使在下拉标签中采纳immediate-check=”false”属性的话

<ion-infinite-scroll immediate-check="false" ng-if="moredata" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

      $stateChangeSuccess配置是多少加载:是还是不是在页面加载后随即触发on-infinite的办法,设为false后,则唯有滚动到页面边缘时才会接触,就算页面加载出来已经到最底部,不滚动一下的话也是不会触发的。

  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                 {{g.price}}{{'jifen.jifen' | i18next}}
 9                 <i class="exchange-btn">{{'jifen.exchangeNow' | i18next}}</i>
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手势事件:

    开端使用ng-click,但事件不起效能,通过搜索发掘:直接在ion-list中的ion-item中并无法接触ng-click事件,能够在item中的成分上再套一层div。

    Ionic
管见所及难题及减轻方案:

注:分页参谋文书档案

ionic 上拉刷新 ion-infinite-scroll 自动调用数次难题解决
  到场机械漏刻timer:

ionic 的下拉刷新 与
上拉加载:

列表显示页面,分页数据开展追加:

有个列表,几千条数据,做分页查询,节制每趟呈现查询20条,每便拉到最终20条边缘的时候,触发Infiniti滚动,这个时候会并发加载Logo,继续加载后续20条数据,加载到最后的时候会提醒数据“加载完毕”。

品种的ui使用的mint-ui,所以采用的卓越滚动也是mint-ui里面包车型大巴,详细参谋官方文书档案

接下去给大家介绍代码完结:

1、为要素增加 v-infinite-scroll
指令就能够使用Infiniti滚动。滚动该因素,当其尾巴部分与被滚动成分底部的间距小于给定的阈值(通过
infinite-scroll-distance 设置)时,绑定到 v-infinite-scroll
指令的办法就能被触发。

 export default { data() { return { //&#21021;&#22987;&#21270;&#26080;&#38480;&#21152;&#36733;&#30456;&#20851;&#21442;&#25968; queryLoading: false, moreLoading: false, allLoaded: false, totalNum: 0, pageSize: 20, pageNum: 1, } }, computed: { params() { return{ //&#36825;&#37324;&#20808;&#23450;&#20041;&#35201;&#20256;&#36882;&#32473;&#21518;&#21488;&#30340;&#25968;&#25454; //&#28982;&#21518;&#23558;&#27599;&#27425;&#35831;&#27714;20&#26465;&#30340;&#21442;&#25968;&#19968;&#36215;&#25552;&#20132;&#32473;&#21518;&#21488; pageSize: this.pageSize } } }, methods: { //&#26080;&#38480;&#21152;&#36733;&#20989;&#25968; loadMore() { if{ this.moreLoading = true; return; } if{ return; } this.moreLoading = !this.queryLoading; this.pageNum++; this.$http.post("&#35831;&#27714;&#21518;&#21488;&#25968;&#25454;&#30340;&#25509;&#21475;",Object.assign({pageNum:this.pageNum},this.params)).then =&gt; { if(res.sData &amp;&amp; res.sData.list){ this.list = this.list.concat; this.allLoaded = this.debtList.length==this.totalNum; } this.moreLoading = this.allLoaded; }); } }, }

到这里就足以兑现Infiniti滚动了,这里结合了mint-ui的Infinite scroll和Spinner

上述便是本文的全体内容,希望对我们的读书抱有助于,也盼望我们多多点拨脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图