• 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信息显示的开关(这些都可以不用注意)!

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

  • 相关阅读:
    docker学习1--dockerfile
    关于java php go 中AES加解密秘钥长度问题
    API设计中响应数据格式用json的优点
    mac air中编译安装swoole
    跟踪填写表单重复信息
    JS简单实现点赞操作
    JS验证码生成(入门级别)
    注册页面(入门)
    登录表单(入门简单)
    简单的UDP编程1
  • 原文地址:https://www.cnblogs.com/ailen226/p/4626166.html
Copyright © 2020-2023  润新知