ionic 上拉加载问题(分页)

问题描述:

1、第一初始化时执行了上拉加载更多。

2、上拉时存在执行多次加载动作。

angularjs的ajax不提供同步机制,是为了防止页面长时间等待,很多时候我们又需要这种同步机制交换状态,比如上拉加载更多,很多时候不允许同时执行多次加载更多,所以有了这篇文章。

首先上代码

.controller(‘project‘, function($scope, $stateParams, $http,$state,$ionicPopup) {
          $scope.hasmore=true;
          var run = false;//模拟线程锁机制  防止多次请求 含义:是否正在请求。请注意,此处并非加入到了就绪队列,而是直接跳过不执行
          console.log($scope.hasmore+"是否加载更多");
          var obj = {current:1,count:10};
          var result = chushihua(obj,1);  

        $scope.doRefresh = function(){
            var obj_data = {current:1,count:10};
             var result = chushihua(obj_data,2);
            $scope.hasmore=true;
             $scope.$broadcast(‘scroll.refreshComplete‘);
        };

        $scope.loadMore = function(){
            var old = $scope.project;
            if(old!=undefined){
              var result = chushihua(obj,3);
            }
            $scope.$broadcast(‘scroll.infiniteScrollComplete‘);
        };

        /* state:1初始化,2刷新,3加载更多 */
        function chushihua(obj_data,state){
            if(!run){
                 run = true;
                $http({
                   method:"POST",
                   url:‘此处是服务器地址‘,
                  data:obj_data,
                   headers: {‘Content-Type‘: ‘application/json;charset=utf-8‘},
                   dataType:‘JSON‘
                }).success(function(data, status) {

                      run = false;
                      if (state==3) {
                          $scope.project = $scope.project.concat(data.result);
                          if (data.result==null||data.result.length==0) {
                              console.log("结束");
                              $scope.hasmore=false;
                          }else{
                              obj.current += obj.count;
                          }
                      }else{
                          $scope.project = data.result;
                      }
                  }).error(function(data, status) {

                  });
            }

        }
    })

  doRefresh为下拉刷新方法,loadMore为上拉加载方法,chushihua为服务器请求方法。

hasmore为 <ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>上拉加载的 ng-if控制变量。run属性为模拟锁机制,当run为false状态时,允许向服务器发送请求,当为true时表示正在进行请求,会无视该次请求。
state属性:区分状态,1:页面首次初始化加载数据。2:下拉刷新加载数据。3:上拉加载更多。

如有问题探讨请前往http://www.cnblogs.com/dreamowneryong/p/4969264.html发表评论。水平有限,初学者水平,如有问题欢迎指正。
时间: 2024-08-28 05:48:45

ionic 上拉加载问题(分页)的相关文章

ionic上拉加载更多当数据加载完没有下一页的时候我们需要显示一下&quot;没有更多了&quot;的友好提示

ionic上拉加载更多当数据加载完没有下一页的时候我们需要显示一下"没有更多了"的友好提示,但是在ionic里面遇到了一个问题.就是没有数据的时候我显示了没有更多的时候我的点击商品详情的事件失效了.怎么点都不触发 这到底怎么回事.简直是....遇到了各种奇葩问题.好了先不吐槽了.还是先解决问题吧. 我们看代码的时候很容易从因为这句话而出发.最开始的时候我是上拉第一页的时候.点击事件还有效.也就是上拉到最后一页点击事件才会失效.也就是isNext为false的时候.这时候我就会以为是ng

移动端touch事件 || 上拉加载更多

前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误的姿势,例如长按后再touchmove等会出现卡死的假象.(ps:当然, 我不认为是插件的问题,当时的想法是觉得引用的插件存在冲突),于是,我就直接通过封装touch事件完成上拉加载实现分页的功能. 备注:文章最后会加上为实现这个功能我找的一些插件 了解touch事件 在应用touch事件实现上拉加

ionic 的下拉刷新 与 上拉加载

<ion-view view-title="消息通知"> <ion-content class="padding"> <!-- <ion-refresher> 下拉刷新指令 --> <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher&g

仿头条新闻app,实现下拉刷新,上拉加载分页

---恢复内容开始--- 环境appcan appcan.ready(function() { page = 1; type = 0; searchDate = getNowTime(); highSearch(type); appcan.frame.setBounce([0,1], function(type) { //$("#pullstatus"+type).html(!type?"开始下拉":"开始上拖"); }, function(ty

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

发了十篇教程,现在向我问问题的朋友越来越少了.可能我接触到的学习ionic的就这么些人吧! 可能大家已经觉得我写的东西都太过基础了,没什么值得参考借鉴的地方. 开始有人叫我说直接防类似饿了吗,折八百这样的网站,做一个Demo. 其实我也知道有些朋友就想要这种网上的免费劳动力. 但是其实这个建议还是不错的. 等我把现在这个demo讲完,我可能会考虑找一个成熟的上线的项目进行说明. 这个列表页一说,写完这个的朋友就可以尝试着接手项目了. 我不是说ionic简单,内容少. 我只是说我这些时间里面提到的

wepy小程序实现列表分页上拉加载(1)

使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码结构如下: <style lang="less"> </style> <template> <view> </view> </template> <script> import wepy from 'wep

wepy小程序实现列表分页上拉加载(2)

第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <template> <view class="list-wrapper"> <!-- 滚动列表 --> <scroll-view scroll-y="true" style="height: 400px;" bindscr

ionic 下拉刷新,上拉加载更多

1)下拉刷新用的是 ion-refresher,使用示例如下: <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"> </ion-refresher> 详情说明请看官方文档:http://ionicframework.com/docs/api/directive/ionRefresher/ 刷新后需要收起 loading 动画 $scope.$br

PullToRefreshListView上拉加载、下拉刷新 eclipse项目

说明:此项目实在fragment中的,需要依赖library完成,还用到了Xuitls.jar包.使用了Pull解析XML package com.bwie.test.fragment; import java.io.ByteArrayInputStream;import java.io.IOException;import java.util.ArrayList;import java.util.List; import me.XListView; import org.xmlpull.v1.