HarmonyOS 鸿蒙next中使用PullToRefresh如何通过setHasRefresh去掉下拉刷新

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙next中使用PullToRefresh要通过setHasRefresh去掉下拉刷新可以参考下面代码

PullToRefresh官网https://gitee.com/openharmony-sig/ohos_pull_to_refresh

PullToRefresh 去掉下拉刷新完整代码:

import { HttpGet } from '../common/HttpUtil'
import { NewsModel } from '../models/NewModel'
import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh'

@Entry
@Component
struct Index {
  //scroller需要在list里面绑定还需要在PullToRefresh绑定
  private scroller: Scroller = new Scroller();
  @State newsList: NewsModel[] = []
  @State hasMore: boolean = true
  @State page: number = 1
  pullToRefreshConfigurator?:PullToRefreshConfigurator

  aboutToAppear() {
    this.getNewsList()
    this.pullToRefreshConfigurator=new PullToRefreshConfigurator()
    this.pullToRefreshConfigurator.setHasRefresh(false)
  }

  //上拉分页
  getNewsList(resolve?: (value: string | PromiseLike<string>) => void) {
    let apiUri: string = `https://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=${this.page}`
    console.log(apiUri)
    HttpGet(apiUri).then((response) => {
      // console.log(JSON.stringify(response))
      if (response.success) {
        let data: string = JSON.stringify(response.result)
        let result: NewsModel[] = JSON.parse(data)
        //判断有没有数据
        if (result.length < 20) {
          this.hasMore = false
        }
        this.newsList = this.newsList.concat(result) //拼接数据   [1,2,3] 和[4,5]拼接以后得到的数据就是[1,2,3,4,5]
        this.page++
        if (resolve) {
          resolve("")
        }
      }
    })
  }

  //下拉刷新
  getRefreshList(resolve?: (value: string | PromiseLike<string>) => void) {
    let apiUri: string = `https://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1`
    HttpGet(apiUri).then((response) => {
      // console.log(JSON.stringify(response.result))
      if (response.success) {
        let data: string = JSON.stringify(response.result)
        let result: NewsModel[] = JSON.parse(data)
        this.newsList =result
        this.page=2
        this.hasMore=true;
        if (resolve) {
          resolve('刷新成功')
        }
      }
    })
  }

  @Builder
  NewsListWidget() {
    List({
      space: 40,
      scroller: this.scroller
    }) {
      ForEach(this.newsList, (item: NewsModel) => {
        ListItem() {
          Text(item.title)
            .maxLines(1)
            .fontSize(18)
            .width("100%").textOverflow({
            overflow: TextOverflow.Clip
          })
        }
      })
      if (!this.hasMore) {
        ListItem() {
          Text("------我是有底线的-------")
            .maxLines(1)
            .fontSize(18)
            .textAlign(TextAlign.Center)
            .width("100%")
            .margin({
              top: 20,
              bottom: 20
            })
        }
      }

    }.divider({
      strokeWidth: 0.5,
      color: "#eee"
    })
    .padding(10)
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
  }

  build() {
    Column() {

      PullToRefresh({
        // 可选参数,列表组件所绑定的数据
        // data: this.newsList,
        // 必传项,需绑定传入主体布局内的列表或宫格组件
        scroller: this.scroller,
        // 必传项,自定义主体布局,内部有列表或宫格组件
        customList: () => {
          // 一个用@Builder修饰过的UI方法
          this.NewsListWidget();
        },
        // 可选项,下拉刷新回调
        onRefresh: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据
            this.getRefreshList(resolve)
          });
        },
        // 可选项,上拉加载更多回调
        onLoadMore: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据
            this.getNewsList(resolve)
          });
        },
        customLoad: null,
        customRefresh: null,
        refreshConfigurator:this.pullToRefreshConfigurator
      })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙next中使用PullToRefresh如何通过setHasRefresh去掉下拉刷新 的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部