解决ionic和angular上拉加载的问题

说到ionic上拉加载就跟pc的分页是一样的，他需要在html数据列表的最下面边添加

<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%">
</ion-infinite-scroll>

当列表为空 当ng-if为true的时候， 列表没有被填充满的时候 ，他就会自动加载loadMore（）；

<span style="font-size:18px;">      $scope.loadMore = function() {
      Msdk.postJSON('/informNotice/queryNoticeInfo', {
          pageIndex: $scope.newsList.pageIndex,
          pageSize: $scope.newsList.pageSize,
          informIds: $scope.newsList.informIds
        },
        function(e) {
          if(e.length != 0) {
            //把每次请求到的数据都拼接起来
            var a = $scope.notice;
            $scope.notice = a.concat(e);
            console.log($scope.notice);
            //广播上个加载结束，有条件进行下个加载
            $scope.$broadcast('scroll.infiniteScrollComplete');             $scope.newsList.pageIndex++;</span> 
<span style="font-size:18px;">                        //如果请求到的数据小于pageSize，证明没数据可读</span> 

<span style="font-size:18px;"><span style="white-space:pre">            </span>//hasmore变为false，不会执行上拉加载
            if(e.length < $scope.newsList.pageSize) {
              $scope.hasmore = false;
            } else {</span>
[javascript] view plain copy
<span style="font-size:18px;"><span style="white-space:pre">              </span>//为true有条件进行下次上拉加载
              $scope.hasmore = true;
            }
          } else {
            $scope.hasmore = false;
            $scope.$broadcast('scroll.infiniteScrollComplete');
          }
        })
    }</span>

总结

以上所述是小编给大家介绍的解决ionic和angular上拉加载的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Ionic+AngularJS实现登录和注册带验证功能

    Ionic+AngularJS实现登录和注册带验证功能

    登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li

  • 利用Ionic2 + angular4实现一个地区选择组件

    前言 本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容,为什么会有这篇文章?主要是因为最近在项目重构的过程中,发现之前用mobiscroll写的地区选择指令在angular2中很难重用(毕竟是用typeScript).于是就萌生了自己写一个组件的想法. 想和之前一样基于mobiscroll去写,但是发现非常耗费精力,于是某日万般无奈这下搜了一下相关的组件,不出所料已经有人写了.https://www.npmjs.com/package...但是此组件

  • Ionic + Angular.js实现验证码倒计时功能的方法

    Ionic + Angular.js实现验证码倒计时功能的方法

    前言 之前跟大家分享了关于 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考: 效果图: 正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式,函数如果在没有被取消的时候会无限执行.(取消使用 cancel(promise) ) 用法: $interval(fn,delay,[count],[invokeApply]

  • AngularJS之ionic 框架下实现 Localstorage本地存储

    AngularJS之ionic 框架下实现 Localstorage本地存储

    前言: 我们前台用的是ionic+AngularJS,做的是混合模式移动应用.最近有一个需求是,我在页面A上面滑动的时候,跳入页面B,页面B需要加载页面A的数据,这样的页面传值如何实现呢?那就需要用到LocalStorage本地存储了. Ionic Ionic是目前最有潜力的一款HTML5手机应用开发框架.通过SASS构架应用程序,他提供了很多UI控件来帮助开发者开发强大的应用.加上angularjs可以让ionic应用体验度增强.代码也非常简单.angularjs可以提供数据的双向绑定,使用它

  • angular+ionic返回上一页并刷新页面

    假定当前页面为editCata页面,要返回的是cataDetail页面.目前我找到两种方法实现返回上一页并刷新,如果以后有其它方法,再继续添加. 1.在editCataCtrl.js中注入$ionicHistory服务. 使用$ionicHistory.goBack()方法即可返回到上一页面. JS端代码: $scope.goBack=function(){ $ionicHistory.goBack(); } HTML代码: <button class="button button-cle

  • Ionic + Angular.js实现图片轮播的方法示例

    Ionic + Angular.js实现图片轮播的方法示例

    本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl

  • ionic+AngularJs实现获取验证码倒计时按钮

    ionic+AngularJs实现获取验证码倒计时按钮

    按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){

  • angular+ionic 的app上拉加载更新数据实现方法

    第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释, ng-if  值 布尔型,如果为true,则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可

  • 解决ionic和angular上拉加载的问题

    说到ionic上拉加载就跟pc的分页是一样的,他需要在html数据列表的最下面边添加 <ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> </ion-infinite-scroll> 当列表为空 当ng-if为true的时候, 列表没有被填充满的时候 ,他就会自动加载loadMore(): <span style=

  • 浅谈Vant-list 上拉加载及下拉刷新的问题

    浅谈Vant-list 上拉加载及下拉刷新的问题

    目录 Vant-list 上拉加载及下拉刷新 vant下拉刷新与上拉加载一起使用问题 下拉刷新触发两次 list与pull 解决方法是 Vant-list 上拉加载及下拉刷新 第一步引入 import { Notify, Dialog, Image, List, PullRefresh } from 'vant' import Vue from 'vue' Vue.use(Image).use(List).use(PullRefresh) 第二步 <van-pull-refresh v-mode

  • Ionic如何实现下拉刷新与上拉加载功能

    IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择.Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程

  • 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded(); 有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位 分析原因: 首先这四个模块都是用的 <mt-loadmore :top-method="loadTop" :bott

  • 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动 说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正常滑动,在安卓手机 上不能上下滑动:这现象并不是ios和安卓兼容性问题! 原因:设置了touch-action: none;这属性为局部或者全局属性,将这条属性注释即可正常滑动. 2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题 问题1. 下拉刷新时在手机上,不论滑到任何位置,只要下拉就刷新 原因:滑

  • 微信小程序scroll-view实现上拉加载数据重复的解决方法

    微信小程序scroll-view实现上拉加载数据重复的解决方法

    微信小程序的 scroll-view 上拉加载更多的BUG(数据会多加载,甚至有重复数据). 问题描述:上拉一次,会多次触发触底函数 onReachBottom():换成自定义加载更多函数, 例如 loadMore(), 问题依旧存在. 生产环境:调试基础库 目前最新版本1.9.94 依旧存在这个问题. 解决方法:加状态控制变量,限制 触底函数/加载更多函数 的触发条件. 页面上拉加载更多后,看下图,有重复数据 通用前端wxml代码 search.wxml <!--pages/shop/sear

  • mui上拉加载更多下拉刷新数据的封装过程

    mui上拉加载更多下拉刷新数据的封装过程

    辗转用mui做了两个项目,空下来把mui上拉加载更多,下拉刷新数据做了一个简单的封装,希望可以帮助到需要的朋友 demo项目的结构 直接贴代码了 index.html mui上拉刷新下拉加载都这里了,两个方法搞定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device

  • AngularJS上拉加载问题解决方法

    AngularJS上拉加载问题解决方法

    项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找另外7条数据.但实际情形是不确定的,在服务端控制台(见图2)可看到begno一直到了126,也就是相当于客户端往服务端请求了127次,这是一个令人无法忍受的结果. 图1 客户端搜索栏 图2 服务端控制台 可以断定是客户端的业务逻辑出现了问题.返回到客户端,查看源码逻辑,修改如下: 控制器 $scope.medsearchMore = fu

  • RecyclerView下拉刷新上拉加载

    RecyclerView下拉刷新上拉加载

    一 .前言 最近实在太忙,一个多礼拜没有更新文章了,于是今晚加班加点把demo写出来,现在都12点了才开始写文章. 1.我们的目标 把RecyclerView下拉刷新上拉加载更多加入到我们的开发者头条APP中. 2.效果图 3.实现步骤 找一个带上拉刷新下载加载更多的RecyclerView开源库,我们要站在巨人的肩膀上 下载下来自己先运行下demo,然后看看是不是我们需要的功能,觉得不错就把module依赖进来,整合主项目. 整合进来了之后,我们肯定需要进行修改,例如我这边就有滑动冲突,有多个

随机推荐