ion-content
关联: (ionic-china中文网文档)$ionicScrollDelegate

ionContent指令提供了一个简单使用的内容区域,这个区域可以通过配置使用ionic的自定义滚动视图,或浏览器的溢出滚动。

虽然我们推荐使用ionic自定义功能,滚动在大多数情况下,但有时(由于性能原因),只要使用浏览器的原生溢出滚动就足够了,当然我们还可以通过设置在ionic滚动和溢出滚动间切换。

你可以使用(ionic-china中文网文档)ionRefresher 指令实现上拉刷新,和ionInfiniteScroll 指令实现下拉无限加载

如果ion-content中存在动态内容,需在添加内容后调用$ionicScrollDelegate.resize()重新解析容器尺寸。

注意,该指令得到自己的子作用域。如果不明白,请看 https://docs.angularjs.org/guide/scope.

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

  <ion-content
    [delegate-handle=""]
    [direction=""]
    [locking=""]
    [padding=""]
    [scroll=""]
    [overflow-scroll=""]
    [scrollbar-x=""]
    [scrollbar-y=""]
    [start-x=""]
    [start-y=""]
    [on-scroll=""]
    [on-scroll-complete=""]
    [has-bouncing=""]
    [scroll-event-interval=""]>
  ...
  </ion-content>

API

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

该句柄用$ionicScrollDelegate来标识这个内容区域

direction
(可空)
string

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

locking
(可空)
boolean

是否锁定滚动方向。设置为false时放大或可以两个方向滚动。默认true。

padding
(可空)
boolean

内容是否添加内边距。iOS默认为true,Android为false。

scroll
(可空)
boolean

是否允许内容滚动。默认值为true。

overflow-scroll
(可空)
boolean

是否使用益处滚动或ionic滚动,可以通过 $ionicConfigProvider 设置全局默认配置

scrollbar-x
(可空)
boolean

是否显示水平滚动条。默认true。

scrollbar-y
(可空)
boolean

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

start-x
(可空)
string

水平滚动条的初始位置。默认为0。

start-y
(可空)
string

垂直滚动条的初始位置。默认为0。

on-scroll
(可空)
expression

当用户滚动时触发的表达式。

on-scroll-complete
(可空)
expression

滚动操作完成时触发表达式。先后获得“scrollLeft'和'scrollTop” 的 locals

has-bouncing
(可空)
boolean

是否允许滚动时反弹超过内容区域的边界,ios默认true,Android默认false

scroll-event-interval
(可空)
number

每次触发'on-scroll'表达式间隔的毫秒数。 默认值10