zoukankan      html  css  js  c++  java
  • ionic1 下拉刷新 上拉加载 功能

    html页面如下

     <ion-content>
        <ion-refresher pulling-text="刷新" on-refresh="search()"></ion-refresher>
        <!---首页内容-->
        <div>
          <ul>
            <li ng-repeat="position in positions">内容</li>
          </ul>
        </div>
        <!--首页内容结束-->
        <ion-infinite-scroll ng-if="searchModel.offset<=(positions.count-10)" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
      </ion-content>

    js如下

    angular.module('app')
      .controller('IndexCtrl', function($scope, positionService) {
        $scope.searchModel = {
    offset: 0
    }
    //下拉刷新
    $scope.search = function(){
    $scope.searchModel.offset = 0;
    positionService.getPositions($scope.searchModel)
    .then(function(response){
    $scope.positions = response.data;
    },function(error){
    })
    }
    //上拉加载
    $scope.loadMore = function(){
    $scope.searchModel.offset += 10;
           positionService.getPositions($scope.searchModel)
    .then(function(response){
    $scope.positions = $scope.positions.concat(response.data);
    },function(error){
    })

    }
     })

    具体用法参考   http://www.ionic.wang/js_doc-index-id-25.html      http://www.ionic.wang/js_doc-index-id-29.html

  • 相关阅读:
    R语言常用操作
    Java小知识点
    客户端(android,ios)与服务器通信
    图片保存数据库
    Centos 添加SWAP(交换分区)
    mysql基本知识
    php 工作模式
    apache 工作模式
    lnmp 虚拟主机配置及重写
    mysql alter的常用用法
  • 原文地址:https://www.cnblogs.com/luffyc/p/7218016.html
Copyright © 2011-2022 走看看