搜索文档 /

ion-infinite-scroll

当用户从页面底部或顶部滚动到指定的距离时,Infinite Scroll组件调用要执行的操作。

赋给的表达式 ionInfinite 事件在用户到达所定义的距离时调用。当这个表达式完成任何和所有任务时,它应该调用 完成() 方法。

无限卷动内容

ion-infinite-scroll 组件具有无限滚动逻辑。它需要一个子组件来显示内容。betway东盟体育app离子使用它 ion-infinite-scroll-content 默认组件。该组件显示无限滚动,并根据无限滚动的状态更改外观。它根据用户所处的平台显示最佳效果的旋转栏。控件上的属性可以更改默认的微调器并添加文本 ion-infinite-scroll-content 组件。

自定义内容

分离 ion-infinite-scroll ion-infinite-scroll-content 如果需要,组件允许开发人员创建自己的内容组件。该内容可以包含任何内容,从SVG元素到具有独特CSS动画的元素。

使用


                  <
                 离子含量
                 >
               
                  <
                 ion-button
                
                 (点击)
                  
                  
                 toggleInfiniteScroll ()
                  
                
                 扩大
                  
                  
                 
                  
                 >
               切换无限卷动
                  
                 ion-button
                 >
               
                  <
                 ion-list
                 >
                  
                 ion-list
                 >
               
                  <
                 ion-infinite-scroll
                
                 阈值
                  
                  
                 100 px
                  
                
                 (ionInfinite)
                  
                  
                 loadData(事件)
                  
                 >
               
                  <
                 ion-infinite-scroll-content
                
                 loadingSpinner
                  
                  
                 泡沫
                  
                
                 loadingText
                  
                  
                 加载数据…
                  
                 >
               
                  
                 ion-infinite-scroll-content
                 >
               
                  
                 ion-infinite-scroll
                 >
               
                  
                 离子含量
                 >
复制 复制

                进口
               
                
               组件
                
               ViewChild
                
               
                
               
                “@angular /核心”
                
               
                进口
               
                
               IonInfiniteScroll
                
               
                
               
                “@betway东盟体育appionic /角”
                
               
                组件
                
                
               选择器
                
               
                “infinite-scroll-example”
                
               templateUrl
                
               
                “infinite-scroll-example.html”
                
               styleUrls
                
               
                
                ”。/ infinite-scroll-example.css '
                
               
                
                
               
                出口
               
                
               
                InfiniteScrollExample
               
                
               
                ViewChild
                
               IonInfiniteScroll
                
               infiniteScroll
                
               IonInfiniteScroll
                
               
                构造函数
                
                
               
                
                
               
                loadData
                
                事件
                
               
                
               
                setTimeout
                
                
                
               
                =>
               
                
               
                控制台
                
                日志
                
                “完成”
                
                
               事件
                
               目标
                
                完整的
                
                
                
               
                //应用程序逻辑,以确定是否所有数据都已加载
               
                //禁用无限滚动
               
                如果
               
                
               数据
                
               长度
                ==
               
                1000
                
               
                
               事件
                
               目标
                
               禁用
                
               
                真正的
                
               
                
               
                
                
               
                500
                
                
               
                
               
                toggleInfiniteScroll
                
                
               
                
               
                
                
               infiniteScroll
                
               禁用
                
               
                
                
                
               infiniteScroll
                
               禁用
                
               
                
               
                
复制 复制

                  <
                 离子含量
                 >
               
                  <
                 ion-button
                
                 onClick
                  
                  
                 toggleInfiniteScroll ()
                  
                
                 扩大
                  
                  
                 
                  
                 >
               切换无限卷动
                  
                 ion-button
                 >
               
                  <
                 ion-list
                 >
                  
                 ion-list
                 >
               
                  <
                 ion-infinite-scroll
                
                 阈值
                  
                  
                 100 px
                  
                
                 id
                  
                  
                 无限卷动
                  
                 >
               
                  <
                 ion-infinite-scroll-content
                
                 loading-spinner
                  
                  
                 泡沫
                  
                
                 装载文本
                  
                  
                 加载数据…
                  
                 >
               
                  
                 ion-infinite-scroll-content
                 >
               
                  
                 ion-infinite-scroll
                 >
               
                  
                 离子含量
                 >
复制 复制

                常量
               infiniteScroll
                
               文档
                
                getElementById
                
                “无限卷动”
                
                
               infiniteScroll
                
                addEventListener
                
                “ionInfinite”
                
               
                函数
                
                事件
                
               
                
               
                setTimeout
                
                函数
                
                
               
                
               控制台
                
                日志
                
                “完成”
                
                
               事件
                
               目标
                
                完整的
                
                
                
               
                //应用程序逻辑,以确定是否所有数据都已加载
               
                //禁用无限滚动
               
                如果
               
                
               数据
                
               长度
                ==
               
                1000
                
               
                
               事件
                
               目标
                
               禁用
                
               
                真正的
                
               
                
               
                
                
               
                500
                
                
               
                
                
                
               
                函数
               
                toggleInfiniteScroll
                
                
               
                
               infiniteScroll
                
               禁用
                
               
                
               infiniteScroll
                
               禁用
                
               
                
复制 复制

                进口
               
                
               IonButton
                
               IonContent
                
               IonHeader
                
               IonInfiniteScroll
                
               IonInfiniteScrollContent
                
               IonItem
                
               IonLabel
                
               IonList
                
               IonPage
                
               IonTitle
                
               IonToolbar
                
               useIonViewWillEnter
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                进口
               
                
               useState
                
               
                
               
                “反应”
                
               
                进口
               ExploreContainer
                
               
                “. . /组件/ ExploreContainer”
                
               
                进口
               
                ”。/ Home.css '
                
               
                常量
               InfiniteScrollExample
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                常量
               
                
               数据
                
               setData
                
               
                
               useState
                <
                字符串
                
                
                >
                
                
                
                
                
               
                常量
               
                
               isInfiniteDisabled
                
               setInfiniteDisabled
                
               
                
               
                useState
                
                
                
                
               
                常量
               
                pushData
               
                
               
                
                
               
                =>
               
                
               
                常量
               马克斯
                
               数据
                
               长度
                +
               
                20.
                
               
                常量
               最小值
                
               马克斯
                -
               
                20.
                
               
                常量
               newData
                
               
                
                
                
               
                
               
                
                
               
                
               最小值
                
               
                <
               马克斯
                
               
                ++
                
               
                
               newData
                
                
                
                “项目”
               
                +
               
                
                
               
                
               
                setData
                
                
               
                ...
               数据
                
               
                ...
               newData
                
                
                
               
                
               
                常量
               
                loadData
               
                
               
                
                电动汽车
                 
                
                 任何
                
               
                =>
               
                
               
                setTimeout
                
                
                
               
                =>
               
                
               
                pushData
                
                
                
               
                控制台
                
                日志
                
                加载数据的
                
                
               电动汽车
                
               目标
                
                完整的
                
                
                
               
                如果
               
                
               数据
                
               长度
                ==
               
                1000
                
               
                
               
                setInfiniteDisabled
                
                真正的
                
                
               
                
               
                
                
               
                500
                
                
               
                
               
                useIonViewWillEnter
                
                
                
               
                =>
               
                
               
                pushData
                
                
                
               
                
                
                
               
                返回
               
                
               
                  <
                  IonPage
                 >
                
                  <
                  IonHeader
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonTitle
                 >
                空白
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  
                  IonHeader
                 >
                
                  <
                  IonContent
                
                 全屏
                 >
                
                  <
                  IonHeader
                
                 崩溃
                  
                  
                 浓缩
                  
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonTitle
                
                 大小
                  
                  
                 
                  
                 >
                空白
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  
                  IonHeader
                 >
                
                  <
                  IonButton
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  setInfiniteDisabled
                  
                  
                 isInfiniteDisabled
                  
                  
                
                 扩大
                  
                  
                 
                  
                 >
                切换无限卷动
                  
                  IonButton
                 >
                
                  <
                  IonList
                 >
                
                
               数据
                
                地图
                
                
                
                 
                指数
                
               
                =>
               
                
               
                返回
               
                
               
                  <
                  IonItem
                
                 关键
                  
                  
                 指数
                  
                 >
                
                  <
                  IonLabel
                 >
                
               
                
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
               
                
               
                
                
                
                
                  
                  IonList
                 >
                
                  <
                  IonInfiniteScroll
                
                 onIonInfinite
                  
                  
                 loadData
                  
                
                 阈值
                  
                  
                 100 px
                  
                
                 禁用
                  
                  
                 isInfiniteDisabled
                  
                
                 >
                
                  <
                  IonInfiniteScrollContent
                
                 loadingSpinner
                  
                  
                 泡沫
                  
                
                 loadingText
                  
                  
                 加载数据…
                  
                
                 >
                  
                  IonInfiniteScrollContent
                 >
                
                  
                  IonInfiniteScroll
                 >
                
                  
                  IonContent
                 >
                
                  
                  IonPage
                 >
               
                
                
               
                
                
               
                出口
               
                默认的
               InfiniteScrollExample
                
复制 复制

                进口
               
                
               组件
                
               状态
                
               h
                
               
                
               
                “@stencil /核心”
                
               
                组件
                
                
               标签
                
               
                “infinite-scroll-example”
                
               styleUrl
                
               
                “infinite-scroll-example.css”
               
                
                
               
                出口
               
                
               
                InfiniteScrollExample
               
                
               
                私人
               infiniteScroll
                
               HTMLIonInfiniteScrollElement
                
               
                状态
                
                
               数据
                
               
                
                
                
               
                componentWillLoad
                
                
               
                
               
                
                
                pushData
                
                
                
               
                
               
                pushData
                
                
               
                
               
                常量
               马克斯
                
               
                
                
               数据
                
               长度
                +
               
                20.
                
               
                常量
               最小值
                
               马克斯
                -
               
                20.
                
               
                
               
                
                var
               
                
               最小值
                
               
                <
               马克斯
                
               
                ++
                
               
                
               
                
                
               数据
                
                
                
                “项目”
               
                +
               
                
                
               
                
               
                //当推入数组时,Stencil不会重新呈现
               
                //创建数组的新副本
               
                / / https://stenciljs.com/docs/reactive-data handling-arrays-and-objects
               
                
                
               数据
                
               
                
               
                ...
                
                
               数据
                
                
               
                
               
                loadData
                
                电动汽车
                
               
                
               
                setTimeout
                
                
                
               
                =>
               
                
               
                
                
                pushData
                
                
                
               
                控制台
                
                日志
                
                加载数据的
                
                
               电动汽车
                
               目标
                
                完整的
                
                
                
               
                //应用程序逻辑,以确定是否所有数据都已加载
               
                //禁用无限滚动
               
                如果
               
                
                
                
               数据
                
               长度
                ==
               
                1000
                
               
                
               电动汽车
                
               目标
                
               禁用
                
               
                真正的
                
               
                
               
                
                
               
                500
                
                
               
                
               
                toggleInfiniteScroll
                
                
               
                
               
                
                
               infiniteScroll
                
               禁用
                
               
                
                
                
               infiniteScroll
                
               禁用
                
               
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                  <
                 离子含量
                 >
                
                  <
                 ion-button
                
                 onClick
                  
                  
                  
                  
                 
                  =>
                 
                  
                  
                  toggleInfiniteScroll
                  
                  
                  
                
                 扩大
                  
                  
                 
                  
                 >
                切换无限卷动
                  
                 ion-button
                 >
                
                  <
                 ion-list
                 >
                
                
                
                
               数据
                
                地图
                
                
               
                =>
               
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                
               
                
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
               
                
                
                
                  
                 ion-list
                 >
                
                  <
                 ion-infinite-scroll
                
                 裁判
                  
                  
                  埃尔
                 
                  =>
                 
                  
                  
                 infiniteScroll
                  
                 埃尔
                  
                
                 onIonInfinite
                  
                  
                  
                  电动汽车
                  
                 
                  =>
                 
                  
                  
                  loadData
                  
                 电动汽车
                  
                  
                 >
                
                  <
                 ion-infinite-scroll-content
                
                 loadingSpinner
                  
                  
                 泡沫
                  
                
                 loadingText
                  
                  
                 加载数据…
                  
                 >
                
                  
                 ion-infinite-scroll-content
                 >
                
                  
                 ion-infinite-scroll
                 >
                
                  
                 离子含量
                 >
               
                
                
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                  <
                 ion-page
                 >
               
                  <
                 离子含量
                
                 
                  
                  
                 ion-padding
                  
                 >
               
                  <
                 ion-button
                
                 @click
                  
                  
                 toggleInfiniteScroll
                  
                
                 扩大
                  
                  
                 
                  
                 >
               切换无限卷动
                  
                 ion-button
                 >
               
                  <
                 ion-list
                 >
               
                  <
                 ion-item
                
                 v代表
                  
                  
                 项项目
                  
                
                 :关键
                  
                  
                 
                  
                 >
               
                  <
                 ion-label
                 >
               {{项}}
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-list
                 >
               
                  <
                 ion-infinite-scroll
                
                 @ionInfinite
                  
                  
                 loadData(事件)
                  
                
                 阈值
                  
                  
                 100 px
                  
                
                 id
                  
                  
                 无限卷动
                  
                
                 :禁用
                  
                  
                 isDisabled
                  
                
                 >
               
                  <
                 ion-infinite-scroll-content
                
                 loading-spinner
                  
                  
                 泡沫
                  
                
                 装载文本
                  
                  
                 加载数据…
                  
                 >
               
                  
                 ion-infinite-scroll-content
                 >
               
                  
                 ion-infinite-scroll
                 >
               
                  
                 离子含量
                 >
               
                  
                 ion-page
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                
                 
                  
                  
                 ts
                  
                 >
                 
                  进口
                 
                  
                 IonButton
                  
                 IonContent
                  
                 IonInfiniteScroll
                  
                 IonInfiniteScrollContent
                  
                 IonItem
                  
                 IonLabel
                  
                 IonList
                  
                 IonPage
                  
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 defineComponent
                  
                 裁判
                  
                 
                  
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 IonButton
                  
                 IonContent
                  
                 IonInfiniteScroll
                  
                 IonInfiniteScrollContent
                  
                 IonItem
                  
                 IonLabel
                  
                 IonList
                  
                 IonPage
                  
                  
                 
                  设置
                  
                  
                 
                  
                 
                  常量
                 isDisabled
                  
                 
                  裁判
                  
                  
                  
                  
                 
                  常量
                 
                  toggleInfiniteScroll
                 
                  
                 
                  
                  
                 
                  =>
                 
                  
                 isDisabled
                  
                 价值
                  
                 
                  
                 isDisabled
                  
                 价值
                  
                 
                  
                 
                  常量
                 项目
                  
                 
                  裁判
                  
                  
                  
                  
                  
                 
                  常量
                 
                  pushData
                 
                  
                 
                  
                  
                 
                  =>
                 
                  
                 
                  常量
                 马克斯
                  
                 项目
                  
                 价值
                  
                 长度
                  +
                 
                  20.
                  
                 
                  常量
                 最小值
                  
                 马克斯
                  -
                 
                  20.
                  
                 
                  
                 
                  
                  
                 
                  
                 最小值
                  
                 
                  <
                 马克斯
                  
                 
                  ++
                  
                 
                  
                 项目
                  
                 价值
                  
                  
                  
                 
                  
                  
                 
                  
                 
                  
                 
                  常量
                 
                  loadData
                 
                  
                 
                  
                  电动汽车
                   
                  CustomEvent
                  
                 
                  =>
                 
                  
                 
                  setTimeout
                  
                  
                  
                 
                  =>
                 
                  
                 
                  pushData
                  
                  
                  
                 控制台
                  
                  日志
                  
                  加载数据的
                  
                  
                 电动汽车
                  
                 目标
                  
                  完整的
                  
                  
                  
                 
                  //应用程序逻辑,以确定是否所有数据都已加载
                 
                  //禁用无限滚动
                 
                  如果
                 
                  
                 项目
                  
                 价值
                  
                 长度
                  ==
                 
                  1000
                  
                 
                  
                 电动汽车
                  
                 目标
                  
                 禁用
                  
                 
                  真正的
                  
                 
                  
                 
                  
                  
                 
                  500
                  
                  
                 
                  
                 
                  pushData
                  
                  
                  
                 
                  返回
                 
                  
                 isDisabled
                  
                 toggleInfiniteScroll
                  
                 loadData
                  
                 项目
                  
                 
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

属性

禁用

描述

如果真正的,无限滚动将被隐藏,滚动事件监听器将被删除。

将此设置为true以禁用滚动时主动尝试接收新数据的无限滚动。当知道没有更多的数据可以添加,并且不再需要无限滚动时,这是非常有用的。

属性 禁用
类型 布尔
默认的

位置

描述

无限滚动元素的位置。取值为

属性 位置
类型 “底”|“顶级”
默认的 “底”

阈值

描述

阈值距离的底部内容调用无限滚动时输出事件。阈值可以是百分比,也可以是像素。例如,使用的值10%无限当用户从页面底部滚动10%时调用的输出事件。使用价值100 px当滚动条距页面底部不超过100像素时。

属性 阈值
类型 字符串
默认的 “15%”

事件

的名字 描述
ionInfinite 当滚动到达阈值距离时触发。在infinite处理程序中,当异步操作完成时,必须调用infinite scroll的' complete() '方法。

方法

完整的

描述

调用完成()ionInfinite当异步操作完成时输出事件处理程序。例如,加载state是应用程序执行异步操作时的状态,例如从AJAX请求接收更多数据以向数据列表添加更多项。一旦接收到数据并更新了UI,就可以调用这个方法来表示加载已经完成。这个方法将改变无限滚动的状态加载启用

签名 完成()= > <承诺无效>
查看源代码
Baidu