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

  • 相关阅读:
    interview
    lvs简介
    编译参数说明
    nginx-arch
    network
    linux 密码修改方法
    ps命令详解
    sed 命令+正则表达式
    LINUX SCP 命令详解
    linux下mysql的root密码忘记解决方
  • 原文地址:https://www.cnblogs.com/luffyc/p/7218016.html
Copyright © 2011-2022 走看看