ionic 滚动条

ion-scroll

ion-scroll 用于创建一个可滚动的容器。

用法

<ion-scroll

	[delegate-handle=""]

	[direction=""]

	[paging=""]

	[on-refresh=""]

	[on-scroll=""]

	[scrollbar-x=""]

	[scrollbar-y=""]

	[zooming=""]

	[min-zoom=""]

	[max-zoom=""]>

	...

</ion-scroll>

API

属性 类型 详情
delegate-handle

(可选)
 字符串

该句柄利用$ionicScrollDelegate指定滚动视图。
direction

(可选)
 字符串

滚动的方向。 'x' 或 'y'。 默认 'y'。
paging

(可选)
 布尔值

分页是否滚动。
on-refresh

(可选)
 表达式

调用下拉刷新， 由ionRefresher触发。
on-scroll

(可选)
 表达式

当用户滚动时触发。
scrollbar-x

(可选)
 布尔值

是否显示水平滚动条。默认为false。
scrollbar-y

(可选)
 布尔值

是否显示垂直滚动条。默认为true。
zooming

(可选)
 布尔值

是否支持双指缩放。
min-zoom

(可选)
 整数

允许的最小缩放量（默认为0.5）
max-zoom

(可选)
 整数

允许的最大缩放量（默认为3）

实例

HTML 代码

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">

	<div style="width: 5000px; height: 5000px; background: url('http://www.runoob.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>

</ion-scroll>

CSS 代码

body {

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

}

JavaScript 代码

angular.module('ionicApp', ['ionic']);

尝试一下 »

ion-infinite-scroll

当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。

当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。

用法

<ion-content ng-controller="MyController">

  <ion-infinite-scroll

    on-infinite="loadMore()"

    distance="1%">

  </ion-infinite-scroll>

</ion-content>
function MyController($scope, $http) {

  $scope.items = [];

  $scope.loadMore = function() {

    $http.get('/more-items').success(function(items) {

      useItems(items);

      $scope.$broadcast('scroll.infiniteScrollComplete');

    });

  };

  $scope.$on('stateChangeSuccess', function() {

    $scope.loadMore();

  });

}

当没有更多数据加载时，就可以用一个简单的方法阻止无限滚动，那就是angular的ng-if 指令:

<ion-infinite-scroll

  ng-if="moreDataCanBeLoaded()"

  icon="ion-loading-c"

  on-infinite="loadMoreData()">

</ion-infinite-scroll>

API

属性 类型 详情
on-infinite 表达式

当滚动到底部时触发的事件。
distance

(可选)
 字符串

从底部滚动到触发on-infinite表达式的距离。默认: 1%。
icon

(可选)
 字符串

当加载时显示的图标。默认: 'ion-loading-d'。

$ionicScrollDelegate

授权控制滚动视图（通过ion-content 和 ion-scroll指令创建）。

该方法直接被$ionicScrollDelegate服务触发，来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。

用法

<body ng-controller="MainCtrl">

  <ion-content>

    <button ng-click="scrollTop()">滚动到顶部!</button>

  </ion-content>

</body>
function MainCtrl($scope, $ionicScrollDelegate) {

  $scope.scrollTop = function() {

    $ionicScrollDelegate.scrollTop();

  };

}

方法

resize()

告诉滚动视图重新计算它的容器大小。

scrollTop([shouldAnimate])
参数 类型 详情
shouldAnimate

(可选)
 布尔值

是否应用滚动动画。

 
scrollBottom([shouldAnimate])
参数 类型 详情
shouldAnimate

(可选)
 布尔值

是否应用滚动动画。

<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></title>

         <link href="http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css" rel="stylesheet">

        <script src="http://cdn.bootcss.com/ionic/1.0.1/js/ionic.bundle.min.js"></script>

       <script type="text/javascript">

        angular.module('ionicApp', ['ionic']);

        </script>

        <style type="text/css">

        body {

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

        }

        </style>

    </head>

    <body>

    <ion-view title="Home" hide-nav-bar="true">

      <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">

        <div style="width: 5000px; height: 5000px; background: url('http://www.runoob.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>

      </ion-scroll>

    </ion-view>

    </body>

</html>

ionic 滚动条 ion-scroll 用于创建一个可滚动的容器的更多相关文章

  1. ASP.NET Core管道深度剖析（2）：创建一个“迷你版”的管道来模拟真实管道请求处理流程

    从<ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求>我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从总体设计来讲是非常简单的,但 ...

  2. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  3. WInform 创建一个简单的WPF应用

    (一)创建一个简单的WPF应用 首先,在这里我要说明的是:这里的例子,都是通过控制台程序来创建WPF应用,而非使用现成的WPF模版.因为WPF模版封装了创建WPF应用所需要的各种基本元素,并不利于我们 ...

  4. angular创建一个独立弹窗服务

    1.说明: 这个服务用于创建一个modal(弹窗),通常下,这个弹窗会插入到body的底部,并且拥有自己的作用域($scope),也可以和外界通讯. 2.逻辑: (1).创建模版 (2).拿到模版里要 ...

  5. 在iOS 4中创建一个LDGradientView样式的渐变视图

    本教程将演示如何在 Swift 4 中创建一个多功能的.@IBDesignable 样式的渐变视图类.你可以将 CAGradientView 放到 storyboard 中,并在设计时预览,或者以编程 ...

  6. 17.1.1.3 Creating a User for Replication 创建一个用于用于复制:

    17.1.1.3 Creating a User for Replication 创建一个用于用于复制: 每个slave 连接到master 使用一个MySQL 用户名和密码, 因此必须有一个用户账户 ...

  7. Ionic 2 中创建一个照片倾斜浏览组件

    内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...

  8. 一个先进的App框架:使用Ionic创建一个简单的APP

    原文  http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...

  9. Ionic 2 中的创建一个闪视卡片组件

    闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...

随机推荐

  1. Java各版本的含义

    JavaSE(Java Standard Edition):标准版,定位在个人计算机上的应用.这个版本是Java平台的核心,它提供了非常丰富的API来开发一般个人计算机上的应用程序,包括用户界面接口A ...

  2. js图片放大境效果

    放大境效果如下图所示,当鼠标放到小图时,就会出现浅黄色的小块,而右边方框也出现了,并且右边方框的内容时根据浅黄色小块的内容变换而变换: 原理: 1,准备2张图,一大一小,如上图所示,小图的盒子div1 ...

  3. c# mvc 简洁大气官网---源码

    结构

  4. C#十六进制值0x12,是一个无效字符 - 程序园

    原文:C#十六进制值0x12,是一个无效字符 - 程序园 我正在加载很多xml文档,其中一些返回错误,如“十六进制值0x12,是无效字符”,并且有不同的字符.如何删除它们?   我在这里做了一个小的研 ...

  5. 辞职信也要玩出高big

    辞职信尊敬的各位公司领导:值此用人之际,不期请辞,实属不敬.历经四季,余以凡才,承蒙殊待,幸受公司各位领导知遇之恩,得以与诸位贤达公事.时光荏苒,吾经竭力而为,以图报效,虽幸遇领导执手相教,然资质愚钝 ...

  6. Linux grep return code

    The exit code is 1 because nothing was matched by grep. EXIT STATUS The exit status is 0 if selected ...

  7. 笔记39 Spring Web Flow——订单流程（收集顾客信息）

    如果你曾经订购过披萨,你可能会知道流程.他们首先会询问你的电 话号码.电话号码除了能够让送货司机在找不到你家的时候打电话给 你,还可以作为你在这个披萨店的标识.如果你是回头客,他们可以 使用这个电话号 ...

  8. 在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr。

    在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...

  9. 45. Collection

    因为Collection是接口我们不能直接实例化,所以我们下面的例子都是采用多态实例化实现类ArrayList类 1. Collection中常用方法 添加:    add()  添加一个元素到集合中 ...

  10. 数位dp——牛客多校H

    /* x[1,A] y[1,B] x^y<C 或 x&y>C 把ABC拆成二进制后按位进行数位dp dp[pos][s1][s2][f1][f2] 表示从高到低第pos位,条件一状 ...