ion-scroll
关联: $ionicScrollDelegate

See the Pen by Ionic (@ionic) on CodePen.

创建一个可以滚动的容器。

实例该文档来自ionic中文网ionic-china

基本用法:

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
  <div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

注意:设置宽高才能让用户控制可滚动区域。

如果你只想在一个区域内滚动请用ionContent代替。

API

属性 类型 说明
delegate-handle
(可空)
string

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

direction
(可空)
string

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

locking
(可空)
boolean

是否锁定一次只允许滚动一个方向 默认: true

paging
(可空)
boolean

分页是否滚动

on-refresh
(可空)
expression

调用下拉刷新 由(ionic-china中文网文档)ionRefresher触发

on-scroll
(可空)
expression

当用户滚动时触发

scrollbar-x
(可空)
boolean

是否显示水平滚动条 默认:false

scrollbar-y
(可空)
boolean

是否显示垂直滚动条 默认:true

zooming
(可空)
boolean

是否支持双指缩放

min-zoom
(可空)
integer

允许的最小缩放量(默认为0.5)

max-zoom
(可空)
integer

允许的最大缩放量(默认为3)

has-bouncing
(可空)
boolean

是否允许边缘滚动反弹 IOS默认: true,Android默认: false