zoukankan      html  css  js  c++  java
  • ionic pull to refresh 下拉更新頁面

    有些項目都用到了下拉更新頁面的效果;

    1. 在index.html 中添加ion-refresher 指令 且在我們需要更新內容的外面 添加 如

    <ion-refresher pulling-text=" pull to reflesh" on-refresh="doReFresh()">
          </ion-refresher>
          <ion-list>
            <ion-item ng-repeat="list in lists">{{list.name}}</ion-item>
          </ion-list>
    

     <ion-refresher></ion-refresh> 指令中 pulling-text 屬性就是我們在下拉時顯示的文字, on-refresh 用於處理下拉時我們的數據處理 的函數(向服務器請求數據 ,添加新的內容)

    2. 添加控制器  1 <ion-content ng-controller="refleshCtr"> 

    3. 在app.js 中控制器的

     1 .controller("refleshCtr",function($scope){
     2   $scope.lists=[
     3   {name:"list1"},
     4   {name:"list2"}
     5   ]
     6   $scope.doReFresh=function(){
     7     $scope.lists.unshift({name:"pull to refresh add list3"});
     8     $scope.$broadcast('scroll.refreshComplete');
     9     $scope.$apple()
    10   }
    11 })

    定義了數組lists  ;下拉時調用doReFresh函數 ,$scope.lists.unshift({name:"pull to refresh add list3"}); 向數組插入了一條數據;

    注意:

    $scope.$broadcast('scroll.refreshComplete'); // 廣播下拉更新完成   使list 數組可以正常使用
    $scope.$apple()//在頁面中顯示

  • 相关阅读:
    Java Lambda表达式初探
    解开lambda最强作用的神秘面纱
    常用正则表达式
    js,java时间处理
    Java 8新特性探究(二)深入解析默认方法
    Java 8里面lambda的最佳实践
    lambda表达式和闭包
    Lambda语法篇
    lambda表达式
    依赖注入和控制反转的理解
  • 原文地址:https://www.cnblogs.com/xieyier/p/4018583.html
Copyright © 2011-2022 走看看