ionic 头部和底部+列表+加载动作

作者: hx永恒之恋 | 来源:发表于2016-12-27 11:14 被阅读193次

ionic 头部和底部+列表+加载动作
ionic头(低)部+按钮+列表+卡片
H5一些基础与兼容问题
uniapp之加载更多和返回顶部
iOS UICollectionView 添加header fo
vue上拉加载List 列表
ionic 学习笔记之头部与底部
RecyclerView 分页滑动卡顿分析之旅
RecyclerView 列表悬浮滑动头部
监测滚动到底部事件 react 自定义hook实现

ionic 头部和底部

ion-header-bar
这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。

用法

<ion-header-bar align-title="left" class="bar-positive"> 
  <div class="buttons"> 
    <button class="button" ng-click="doSomething()">
      Left Button
    </button> 
  </div> 
  <h1 class="title">Title!</h1> 
  <div class="buttons"> 
    <button class="button">
      Right Button
    </button> 
  </div>
</ion-header-bar>

<ion-content> Some content!</ion-content>

API

属性	类型	描述
align-title(optional)	string	这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll(optional)	boolean	默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。。它的值是布尔值（true/false）。

ion-footer-bar

知道了 ion-header-bar ，理解ion-footer-bar就轻松多啦！只是 ion-footer-bar 是在屏幕的底部。

用法

<ion-content> Some content!</ion-content>

<ion-footer-bar align-title="left" class="bar-assertive"> 
  <div class="buttons"> 
    <button class="button">Left Button</button> 
  </div> 
  <h1 class="title">Title!</h1> 
  <div class="buttons" ng-click="doSomething()"> 
    <button class="button">Right Button</button> 
  </div>
</ion-footer-bar>

API

与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。

属性	类型	描述
align-title(optional)	string	这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。

ionic 列表操作

列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。

用法

<ion-list> 
  <ion-item ng-repeat="item in items"> 
    Hello, {{item}}! 
  </ion-item>  
</ion-list>

高级用法: 缩略图，删除按钮，重新排序，滑动

<ion-list ng-controller="MyCtrl" show-delete="shouldShowDelete" show-reorder="shouldShowReorder" can-swipe="listCanSwipe"> 
  <ion-item ng-repeat="item in items" class="item-thumbnail-left"> 
    <img ng-src="{{item.img}}"> 
    <h2>{{item.title}}</h2> 
    <p>{{item.description}}</p> 
    <ion-option-button class="button-positive" ng-click="share(item)"> 
      分享 
    </ion-option-button> 

    <ion-option-button class="button-info" ng-click="edit(item)"> 
      编辑 
    </ion-option-button> 

    <ion-delete-button class="ion-minus-circled" ng-click="items.splice($index, 1)"> 

    </ion-delete-button> 

    <ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item, $fromIndex, $toIndex)"> 

    </ion-reorder-button> 

  </ion-item>
</ion-list>

API

属性	类型	详情
delegate-handle(可选)	字符串	该句柄定义带有$ionicListDelegate的列表。
show-delete(可选)	布尔值	列表项的删除按钮当前是显示还是隐藏。
show-reorder(可选)	布尔值	列表项的排序按钮当前是显示还是隐藏。
can-swipe(可选)	布尔值	列表项是否被允许滑动显示选项按钮。默认：true。

实例

【HTML 代码：】

<html ng-app="ionicApp"> 

  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>Ionic List Directive</title> 
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script> 
  </head> 

  <body ng-controller="MyCtrl"> 

    <ion-header-bar class="bar-positive"> 
      <div class="buttons"> 
        <button class="button button-icon icon ion-ios-minus-outline" 
             ng-click="data.showDelete = !data.showDelete;   
                       data.showReorder = false"></button> 
      </div> 
      <h1 class="title">Ionic Delete/Option Buttons</h1> 
      <div class="buttons"> 
        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder"> Reorder </button> 
      </div> 
    </ion-header-bar> 

    <ion-content> 
      <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists --> 
      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder"> 
        <ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}" class="item-remove-animate"> 
          Item {{ item.id }} 
          <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"> </ion-delete-button> 
          <ion-option-button class="button-assertive" ng-click="edit(item)"> Edit </ion-option-button> 
          <ion-option-button class="button-calm" ng-click="share(item)"> Share </ion-option-button> 
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button> 
        </ion-item> 
      </ion-list> 
    </ion-content> 

  </body>
</html>

【CSS 代码】

body { 
  cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}

【JavaScript 代码】

  angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope) { 
    $scope.data = { showDelete: false }; 
    $scope.edit = function(item) { 
      alert('Edit Item: ' + item.id); 
    }; 
    $scope.share = function(item) { 
      alert('Share Item: ' + item.id); 
    }; 
    $scope.moveItem = function(item, fromIndex, toIndex) { 
      $scope.items.splice(fromIndex, 1); 
      $scope.items.splice(toIndex, 0, item); 
    }; 
    $scope.onItemDelete = function(item) { 
      $scope.items.splice($scope.items.indexOf(item), 1); 
    }; 
    $scope.items = [ 
      { id: 0 }, 
      { id: 1 }, 
      { id: 2 }, 
      { id: 3 }, 
      { id: 4 }, 
      { id: 5 }, 
      { id: 6 }, 
      { id: 7 }, 
      { id: 8 }, 
      { id: 9 }, 
      { id: 10 }, 
      { id: 11 }, 
      { id: 12 }, 
      { id: 13 }, 
      { id: 14 }, 
      { id: 15 }, 
      { id: 16 }, 
      { id: 17 }, 
      { id: 18 }, 
      { id: 19 }, 
      { id: 20 }, 
      { id: 21 }, 
      { id: 22 }, 
      { id: 23 }, 
      { id: 24 }, 
      { id: 25 }, 
      { id: 26 }, 
      { id: 27 }, 
      { id: 28 }, 
      { id: 29 }, 
      { id: 30 }, 
      { id: 31 }, 
      { id: 32 }, 
      { id: 33 }, 
      { id: 34 }, 
      { id: 35 }, 
      { id: 36 }, 
      { id: 37 }, 
      { id: 38 }, 
      { id: 39 }, 
      { id: 40 }, 
      { id: 41 }, 
      { id: 42 }, 
      { id: 43 }, 
      { id: 44 }, 
      { id: 45 }, 
      { id: 46 }, 
      { id: 47 }, 
      { id: 48 }, 
      { id: 49 }, 
      { id: 50 } 
    ]; 
  });

尝试一下 »

ionic 加载动作

$ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。

用法

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) { 
  $scope.show = function() { 
    $ionicLoading.show({ template: 'Loading...' }); 
  }; 
  $scope.hide = function(){ 
    $ionicLoading.hide(); 
  };
});

方法

显示一个加载效果。

show(opts)

参数	类型	详情
opts	object	<small>loading指示器的选项。可用属性： {string=} template 指示器的html内容。 {string=} templateUrl 一个加载html模板的url作为指示器的内容。 {boolean=} noBackdrop 是否隐藏背景。默认情况下它会显示。 {number=} delay 指示器延迟多少毫秒显示。默认为不延迟。 {number=} duration 等待多少毫秒后自动隐藏指示器。默认情况下，指示器会一直显示，直到触发.hide()。</small>

隐藏一个加载效果。

hide()

API

属性	类型	详情
delegate-handle(可选)	字符串	该句柄定义带有$ionicListDelegate的列表。
show-delete(可选)	布尔值	列表项的删除按钮当前是显示还是隐藏。
show-reorder(可选)	布尔值	列表项的排序按钮当前是显示还是隐藏。
can-swipe(可选)	布尔值	列表项是否被允许滑动显示选项按钮。默认：true。

实例

【HTML 代码：】

  <html ng-app="ionicApp"> 

    <head> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
      <title>Ionic Modal</title> 
      <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"> 
      <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script> 
    </head> 

    <body ng-controller="AppCtrl"> 
      <ion-view title="Home"> 

        <ion-header-bar> 
          <h1 class="title">The Stooges</h1> 
        </ion-header-bar> 

        <ion-content has-header="true"> 
          <ion-list> 
            <ion-item ng-repeat="stooge in stooges" href="#">
              {{stooge.name}}
            </ion-item> 
          </ion-list> 
        </ion-content> 

      </ion-view> 
    </body>

  </html>

【JavaScript 代码】

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) { 
  // Setup the loader 
  $ionicLoading.show({ 
    content: 'Loading', 
    animation: 'fade-in', 
    showBackdrop: true, 
    maxWidth: 200, 
    showDelay: 0 
  }); 
  // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded. 
  $timeout(function () { 
    $ionicLoading.hide(); 
    $scope.stooges = [
      {name: 'Moe'}, 
      {name: 'Larry'}, 
      {name: 'Curly'}
    ]; 
  }, 2000); 
});

尝试一下 »

$ionicLoadingConfig

设置加载的默认选项:

用法:

var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', { 
  template: '默认加载模板……'
});
app.controller('AppCtrl', function($scope, $ionicLoading) { 
  $scope.showLoading = function() { 
    $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置 
  };
});

ionic 头部和底部+列表+加载动作
ionic 头部和底部 ion-header-bar这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-s...
ionic头(低)部+按钮+列表+卡片
ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。i...
H5一些基础与兼容问题
用在页面头部或者版块头部用在页面底部或者版块底部导航（包含链接的一个列表）标题组合用来划分区域 ...
uniapp之加载更多和返回顶部
列表页到底部加载更多列表项，并有返回顶部按钮。 list.vue
iOS UICollectionView 添加header fo
注册头部和底部视图 2.头部视图和底部视图的大小设置内容
vue上拉加载List 列表
介绍 Vant框架瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。在main...
ionic 学习笔记之头部与底部
简介没啥好说的，直接撸代码，参考官方文档 Header Header是固定在屏幕顶部的组件,ionic 默认提供...
RecyclerView 分页滑动卡顿分析之旅
问题：最近在开发分页加载列表时发现这样一个问题，在滑动到列表底部等待加载下一页后，再向上滑动列表，此时会出现几次页...
RecyclerView 列表悬浮滑动头部
RecyclerView 列表悬浮头内容布局头部布局 RecyclerView 可以实现不同加载布局 , 在头...
监测滚动到底部事件 react 自定义hook实现
近期要实现一个滚动加载的列表组件，很明显可以通过绑定滚动事件来监听是否滚动到底部，每次滚动到底部的时候执行加载，然...