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('https://www.uoften.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS 代码

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

JavaScript 代码

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