IBest-UI@HarmonyOS

Appearance

PullRefresh 下拉刷新 ​

介绍 ​

轻量级, 用于提供下拉刷新的交互操作。

引入 ​

ts
import { IBestPullRefresh } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

TIP

• 当组件内部内容包含List、Grid、Scroll组件时, scroller 为必传属性。
• 由于 List 组件默认有边缘回弹效果, 使用时可设置 List 组件的edgeEffect属性为 EdgeEffect.None。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State isLoading: boolean = false
	private listScroller: ListScroller = new ListScroller()
  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
  @Builder customContent() {
    List({scroller: this.listScroller }) {
      ForEach(this.arr, (item: string) => {
        ListItem() {
          Text('' + item)
            .width('70%')
            .height(80)
            .fontSize(16)
            .margin(10)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(0x89CFF0)
        }.width("100%")
      }, (item: string) => item)
    }.width("100%").edgeEffect(EdgeEffect.None).height("100%")
	}
  build() {
    Column(){
      IBestPullRefresh({
        loading: $isLoading,
        scroller: this.listScroller,
        defaultContent: (): void => this.customContent("1"),
        onRefresh: (): void => this.onRefresh()
      })
    }.height("100%")
  }
}

成功提示 ​

成功提示

TIP

通过 success-text 可以设置刷新成功后的顶部提示文案。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State isLoading: boolean = false
	private scroller: Scroller = new Scroller()
  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
  @Builder customContent() {
    Scroll(this.scroller){
      Column(){
        ForEach(this.arr, (item: string) => {
          Text('' + item)
            .width('70%')
            .height(80)
            .fontSize(16)
            .margin(10)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(0x89CFF0)
        }, (item: string) => item)
      }.width("100%")
    }.height("100%")
	}
  onRefresh(){
		// 此处模拟请求 延时关闭
		setTimeout(() => {
			this.isLoading = false
		}, 1500)
	}
  build() {
    Column(){
      IBestPullRefresh({
        loading: $isLoading,
        scroller: this.scroller,
        defaultContent: (): void => this.customContent(),
        onRefresh: (): void => this.onRefresh()
      })
    }.height("100%")
  }
}

自定义提示 ​

自定义提示

点我查看代码
ts
import { IBestRefreshContentParams } from "@ibestservices/ibest-ui"
@Entry
@Component
struct DemoPage {
  @State isLoading: boolean = false
	private scroller: Scroller = new Scroller()
  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
  @Builder customPullingContent($$: IBestRefreshContentParams){
		Image($r("app.media.icon_loading_point_static"))
			.width(60)
			.scale({ x: $$.distance / 100, y: $$.distance / 100 })
	}
	@Builder customLoosingContent(){
		Image($r("app.media.icon_loading_point_static"))
			.width(60)
	}
	@Builder customLoadingContent(){
		Image($r("app.media.icon_loading_point_dynamics"))
			.width(60)
	}
  @Builder customContent() {
    Scroll(this.scroller){
      Column(){
        ForEach(this.arr, (item: string) => {
          Text('' + item)
            .width('70%')
            .height(80)
            .fontSize(16)
            .margin(10)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(0x89CFF0)
        }, (item: string) => item)
      }.width("100%")
    }.height("100%")
	}
  onRefresh(){
		// 此处模拟请求 延时关闭
		setTimeout(() => {
			this.isLoading = false
		}, 1500)
	}
  build() {
    Column(){
      IBestPullRefresh({
        loading: $isLoading,
        defaultContent: (): void => this.customContent(),
        pullingContent: this.customPullingContent,
        loosingContent: this.customLoosingContent,
        loadingContent: (): void => this.customLoadingContent(),
        onRefresh: (): void => this.onRefresh()
      })
    }.height("100%")
  }
}

API ​

@Props ​

参数说明类型默认值
loading是否处于加载状态, 支持双向绑定booleanfalse
pullingText下拉过程提示文案ResourceStr下拉即可刷新...
loosingText下拉释放过程提示文案ResourceStr释放即可刷新...
loadingText下拉加载过程提示文案ResourceStr加载中...
successText下拉刷新成功提示文案ResourceStr''
successDuration下拉刷新成功提示展示时长(ms)number500
duration下拉刷新动画时长(ms)number300
headHeight顶部内容高度number | string50
scroller当自定义内容包含List Grid Scroll组件时必传Scroller-
isEnableSlideUp 2.0.4是否启用上滑加载booleantrue
bottomHeight 2.0.4底部加载内容高度number | string50
slidingUpText 2.0.4上滑过程提示文案ResourceStr上滑即可加载...
slideUpLoosingText 2.0.4上滑释放过程提示文案ResourceStr释放即可加载...
slideUpLoadingText 2.0.4上滑加载过程提示文案ResourceStr加载中...
slideUpSuccessText 2.0.4上滑加载成功提示文案ResourceStr''
slideUpSuccessDuration 2.0.4上滑加载成功提示展示时长(ms)number500
slideUpDuration 2.0.4上滑加载动画时长(ms)number300

Events ​

事件名说明回调参数
onRefresh触发下拉刷新时的回调-

插槽 ​

插槽名说明类型
defaultContent默认内容CustomBuilder
pullingContent自定义下拉过程内容($$: IBestRefreshContentParams) => void
loosingContent自定义释放过程内容($$: IBestRefreshContentParams) => void
loadingContent自定义加载过程内容CustomBuilder
successContent自定义刷新成功提示内容CustomBuilder
slidingUpContent 2.0.4自定义上滑过程内容($$: IBestRefreshContentParams) => void
slideUpLoosingContent 2.0.4自定义上滑释放过程内容($$: IBestRefreshContentParams) => void
slideUpLoadingContent 2.0.4自定义上滑加载过程内容CustomBuilder
slideUpSuccessContent 2.0.4自定义上滑加载成功提示内容CustomBuilder

IBestRefreshContentParams 数据结构 ​

参数说明类型
distance下拉距离number