zoukankan      html  css  js  c++  java
  • ionic 的下拉刷新 与 上拉加载

    <ion-view view-title="消息通知">
      <ion-content class="padding">
     <!-- <ion-refresher> 下拉刷新指令  -->
      <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher>
        <div class="list card" ng-repeat="message in vm.messages" >
          <div class="item item-divider item-icon-right">{{message.title}}
            <i class="icon" ng-click="vm.show(message)" ng-class="message.static?'ion-arrow-down-b':'ion-arrow-right-b'"></i></div>
          <div class="item item-body">
            <div>
              {{message.static?message.content:message.content.substr(0, 40)}}
            </div>
          </div>
        </div>
        <!-- ion-infinite-scroll 上拉加载数据指令 distance默认1% nf-if的值为false时,就禁止执行on-infinite  -->
        <ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>
      </ion-content>
    </ion-view>
    

     1. on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast('scroll.refreshComplete');

     2. on-infinite 上拉触发的函数 同样需要广播事件结束 $scope.$broadcast('scroll.infiniteScrollComplete');

    js代码

    angular.module('starter.controllers', [])
    .controller('InfoCtrl', function($rootScope, $timeout, $interval, $scope, $http, services) {
      var vm = $scope.vm = {
        moredata: false,
        messages: [],
        pagination: {
          perPage: 5,
          currentPage: 1
        },
        init: function () {
          services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
            vm.messages = data;
          })
        },
        show: function (message) {
          if (message.static) {
            message.static = false;
          } else {
            message.static = true;
          }
        },
        doRefresh: function () {
          $timeout(function () {
            $scope.$broadcast('scroll.refreshComplete');
          }, 1000);
        },
        loadMore: function () {
          vm.pagination.currentPage += 1;
          services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
            vm.messages = vm.messages.concat(data);
            if (data.length == 0) {
              vm.moredata = true;
            };
            $scope.$broadcast('scroll.infiniteScrollComplete');
          })
        } 
      }
      vm.init();
    })
    

      此处的messages 是view显示的数据,pagination是做分页加载显示的参数,service是我封装的$http服务,show方法是view信息显示的开关(这些都可以不用注意)!

    有不清楚的,可以提问!本人也是新手,大家一起共同学习进步!

  • 相关阅读:
    使用字体图标完整步骤
    用position:absolute定位小窗口位于版面正中心
    MySql 技术内幕 (第7章 游标)
    MySql 技术内幕 (第5章 联接与集合操作)
    赋值语句作为判断的条件
    发布订阅模式和观察者模式
    关系代数
    数据库关系代数表达式学习
    软考通过分数
    哈希表——线性探测法、链地址法、查找成功、查找不成功的平均长度
  • 原文地址:https://www.cnblogs.com/ailen226/p/4626166.html
Copyright © 2011-2022 走看看