搜索文档 /

离子含量

内容组件提供了一个易于使用的内容区域,并提供了一些控制可滚动区域的有用方法。在一个视图中应该只有一个内容。

控件中提供的全局样式可以自定义Content和许多其他Ionibetway东盟体育appc组件来修改其填充、边距等 CSS实用程序 或者通过使用CSS和可用的单独样式化它 CSS自定义属性

使用


                  <
                 离子含量
                
                 (scrollEvents)
                  
                  
                 真正的
                  
                
                 (ionScrollStart)
                  
                  
                 logScrollStart ()
                  
                
                 (ionScroll)
                  
                  
                 logScrolling(事件)
                  
                
                 (ionScrollEnd)
                  
                  
                 logScrollEnd ()
                  
                 >
               
                  
                 离子含量
                 >

                  <
                 离子含量
                 >
                  
                 离子含量
                 >

                var
               内容
                
               文档
                
                querySelector
                
                离子含量的
                
                
               内容
                
               scrollEvents
                
               
                真正的
                
               内容
                
                addEventListener
                
                “ionScrollStart”
                
               
                
                
               
                = >
               控制台
                
                日志
                
                “滚动开始”
                
                
                
               内容
                
                addEventListener
                
                “ionScroll”
                
               
                
                电动汽车
                
               
                = >
               控制台
                
                日志
                
                “滚动”
                
               电动汽车
                
               细节
                
                
                
               内容
                
                addEventListener
                
                “ionScrollEnd”
                
               
                
                
               
                = >
               控制台
                
                日志
                
                “滚动结束”
                
                
                

                进口
               反应
                
               
                “反应”
                
               
                进口
               
                
               IonContent
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                常量
               ContentExample
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                = >
               
                
               
                  <
                  IonContent
                
                 scrollEvents
                  
                  
                  真正的
                  
                
                 onIonScrollStart
                  
                  
                  
                  
                 
                  = >
                 
                  
                  
                  
                
                 onIonScroll
                  
                  
                  
                  
                 
                  = >
                 
                  
                  
                  
                
                 onIonScrollEnd
                  
                  
                  
                  
                 
                  = >
                 
                  
                  
                  
                 >
                
                  
                  IonContent
                 >
               
                
                

                  <
                 模板
                 >
               
                  <
                 离子含量
                
                 : scrollEvents
                  
                  
                 真正的
                  
                
                 @ionScrollStart
                  
                  
                 logScrollStart ()
                  
                
                 @ionScroll
                  
                  
                 logScrolling(事件)
                  
                
                 @ionScrollEnd
                  
                  
                 logScrollEnd ()
                  
                 >
               
                  
                 离子含量
                 >
               
                  
                 模板
                 >

属性

颜色

描述

从应用程序的调色板中使用的颜色。默认的选项是:“主”“二级”“三级”“成功”“警告”“危险”“光”“媒介”,“黑暗”.有关颜色的更多信息,请参见主题

属性 颜色
类型 字符串|未定义

forceOverscroll

描述

如果真正的而且内容不会引起滚动溢出,滚动交互会引起弹跳。如果内容超出了ionContent的范围,什么都不会改变。注意,在iOS上不会禁用系统反弹。这是一个操作系统级别的设置。

属性 force-overscroll
类型 布尔|未定义

全屏

描述

如果真正的,内容将滚动到页眉和页脚后面。通过将工具栏设置为透明,可以很容易地看到这种效果。

属性 全屏
类型 布尔
默认的

scrollEvents

描述

由于性能原因,默认情况下禁用ionScroll事件,为了启用它们并从(ionScroll)开始监听,请将此属性设置为真正的

属性 scroll-events
类型 布尔
默认的

scrollX

描述

如果要启用X轴中的内容滚动,请将此属性设置为真正的

属性 scroll-x
类型 布尔
默认的

scrollY

描述

如果要禁用Y轴上的内容滚动,请将此属性设置为

属性 scroll-y
类型 布尔
默认的 真正的

事件

的名字 描述
ionScroll 滚动时释放。该事件默认关闭。看看这个属性:' scrollEvents '
ionScrollEnd 当卷轴结束时发出。
ionScrollStart 当滚动开始时发出。

方法

getScrollElement

描述

获取实际滚动发生的元素。此元素可用于订阅滚动事件或手动修改scrollTop.但是,建议使用提供的API离子含量

即使用ionScrollionScrollStartionScrollEnd用于滚动事件和scrollToPoint ()滚动内容到某个点。

签名 getScrollElement() = >承诺HTMLElement > <

scrollByPoint

描述

在组件中按指定的X/Y距离滚动。

签名 scrollByPoint(x: number, y: number, duration: number) => Promise

scrollToBottom

描述

滚动到组件的底部。

签名 scrollToBottom(持续时间?:number) => Promise

scrollToPoint

描述

滚动到组件中指定的X/Y位置。

签名 scrollToPoint(x: number | null | undefined, y: number | null | undefined,持续时间?: number) => Promise

scrollToTop

描述

滚动到组件的顶部。

签名 scrollToTop(持续时间?:number) => Promise

CSS自定义属性

的名字 描述
——背景 内容背景
——颜色 内容的颜色
——keyboard-offset 内容的键盘偏移量
——offset-bottom 偏移内容的底部
——offset-top 偏移内容的顶部
——padding-bottom 内容的底部填充
——padding-end 如果方向为从左到右,则为右填充;如果方向为内容从右到左,则为左填充
——padding-start 如果方向为从左到右,则为左填充;如果方向为内容的从右到左,则为右填充
——padding-top 内容的上填充

的名字 描述
如果提供的内容没有插槽,则内容放置在可滚动区域中。
“固定” 应该用于不应该滚动的固定内容。
查看源代码
Baidu