HarmonyOS鸿蒙Next中三方组件pulltorefresh如何使用

HarmonyOS鸿蒙Next中三方组件pulltorefresh如何使用啊？

3 回复

您好，您是没找到三方件的官方指导[@ohos/pulltorefresh地址](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fpulltorefresh)吗，官方指导有详细的介绍以及参数说明。还是找到了，不会使用呢？

更多关于HarmonyOS鸿蒙Next中三方组件pulltorefresh如何使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


找到个示例

import { PullToRefresh } from '@ohos/pulltorefresh'

@Component
struct ScrollCeilingTab {
  scroller: Scroller = new Scroller()
  private tabscroller: Scroller = new Scroller();
  @State itemData: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  tabTitles: Array<string> = ['Tab1', 'Tab2', 'Tab3']
  
  @Builder
  private getListView() {
    List({ space: 20, scroller: this.tabscroller }) {
      ForEach(this.itemData, (item: number) => {
        ListItem() {
          Text(`${item}`)
            .height(80)
            .width('100%')
            .textAlign(TextAlign.Center)
            .backgroundColor(0xDDDDDD)
            .margin({ bottom: 5 })
        }
      })
    }
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })

    .backgroundColor('#eeeeee')
    .divider({ strokeWidth: 1, color: 0x222222 })
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
  }

  @Builder
  tabContentData(tabTitle: string) {
    TabContent() {
      Column() {
        PullToRefresh({
          data: this.itemData,
          scroller: this.tabscroller,
          customList: () => {
            this.getListView();
          },
          onRefresh: () => {
            return new Promise<(resolve, reject) => {
              setTimeout(() => {
                resolve('刷新成功');
                let num = this.itemData.length
                this.itemData.push(num);
              }, 500);
            });
          },
          onLoadMore: () => {
            return new Promise<(resolve, reject) => {
              setTimeout(() => {
                resolve('');
                let num = this.itemData.length
                this.itemData.push(num);
              }, 2000);
            });
          },
          customLoad: null,
        })
      }
    }.tabBar(tabTitle)
    .padding({ top: 5, bottom: 5 })
    .borderWidth(1)
    .borderColor(Color.Red)
  }

  build() {
    Column({ space: 10 }) {
      Scroll(this.scroller) {
        Column() {
          Image($r('app.media.app_icon')).height(70)

          Tabs() {
            ForEach(this.tabTitles, (title: string) => {
              this.tabContentData(title)
            })
          }
          .borderWidth(2)
        }
        .width('90%')
        .alignItems(HorizontalAlign.Center)
      }
      .width('100%')
      .align(Alignment.Center)
      .scrollBar(BarState.Off)
    }
  }
}

在HarmonyOS鸿蒙Next中，使用三方组件pulltorefresh需要先通过ohpm安装该组件。安装命令如下：

ohpm install @ohos/pulltorefresh

安装完成后，在代码中引入并使用：

import { PullToRefresh } from '@ohos/pulltorefresh';

// 在页面中使用
PullToRefresh({
  onRefresh: () => {
    // 刷新逻辑
  }
});

确保在build-profile.json5中添加依赖项，并在hvigorfile.js中配置相关参数。

回到顶部