鸿蒙Next开发教程:上拉加载和下拉刷新

本文介绍的是一个优秀的第三方库PullToRefresh，并使用它实现列表的上拉加载和下拉刷新。先上个效果图：首先使用ohpm安装PullToRefresh： ohpm install @ohos/pulltorefresh 用法和常用参数： PullToRefresh({ // 必传项，列表组件所绑定的数据 data: $newsData, // 必传项，需绑定传入主体布局内的列表或宫格组件 scroller: this.scroller, // 必传项，自定义主体布局，内部有列表或宫格组件 customList: () => { // 一个用@Builder修饰过的UI方法 }, // 可选项，下拉刷新回调 onRefresh: () => { }, // 可选项，上拉加载更多回调 onLoadMore: () => { }, }) 下面是效果图的全部实现代码，列表数据来自本地json文件： import { PullToRefresh } from '@ohos/pulltorefresh' import util from '@ohos.util'; @Entry @Component struct Index { // 需绑定列表或宫格组件 private scroller: Scroller = new Scroller(); @State newsData: NewsData[] = [] onPageShow(): void { this.getData('news.json') } getData(contentFile:string){ let data = getContext(this).resourceManager.getRawFileContent(contentFile,(err,value)=> { let view: Uint8Array = new Uint8Array(value); // 使用Uint8Array读取arrayBuffer的数据 let textDecoder: util.TextDecoder = util.TextDecoder.create(); // 调用util模块的TextDecoder类 let res: string = textDecoder.decodeWithStream(view); // 对view解码 let strArr:object[] = JSON.parse(res) let list:object[] = strArr['data']['list']; for (let i = 0; i < list.length; i++) { const contactTemp = new NewsData(list[i]['title'], list[i]['time'],list[i]['pic']); this.newsData.push(contactTemp); } }) } build() { Row() { PullToRefresh({ // 必传项，列表组件所绑定的数据 data: $newsData, // 必传项，需绑定传入主体布局内的列表或宫格组件 scroller: this.scroller, // 必传项，自定义主体布局，内部有列表或宫格组件 customList: () => { // 一个用@Builder修饰过的UI方法 this.getListView(); }, // 可选项，下拉刷新回调 onRefresh: () => { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { resolve('刷新成功'); this.newsData = []; this.getData('news.json') }, 2000); }); }, // 可选项，上拉加载更多回调 onLoadMore: () => { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { resolve(''); this.getData('newsmore.json') }, 2000); }); }, customLoad: null, customRefresh: null, }) } .height('100%') } // 必须使用@Builder修饰方法 @Builder private getListView() { List({ space: 3, scroller: this.scroller }) { ForEach(this.newsData, (item: NewsData,index) => { ListItem() { Row(){ Image(item.newsPic) .width(80) .height(80) Column(){ Text(item.newsTitle) .fontSize(18) .fontColor(Color.Black) Text(item.newsTime) .fontSize(16) .fontColor(Color.Gray) } .padding({top:10,bottom:10}) .margin({left:10}) .justifyContent(FlexAlign.SpaceBetween) .height(90) .alignItems(HorizontalAlign.Start) } .height(90) .padding({left:10,right:30,top:5,bottom:5}) .width('100%') } .height(90) }, (item: NewsData, index?: number) => JSON.stringify(item) + index); } .divider({ strokeWidth: 0.5, color: Color.Gray, startMargin: 20, endMargin: 0 }) .width('100%') .backgroundColor('#f1f3f5') // TODO: 知识点：必须设置列表为滑动到边缘无效果，否则无法触发pullToRefresh组件的上滑下拉方法。 .edgeEffect(EdgeEffect.None) } aboutToDisappear() { this.newsData = []; } } // 新闻数据对象 class NewsData { newsTitle: string newsTime: string newsPic: string constructor( newsTitle: string, newsTime: string, newsPic: string) { this.newsTitle = newsTitle; this.newsTime = newsTime; this.newsPic = newsPic; } }

Mar 23, 2025 - 10:49

本文介绍的是一个优秀的第三方库PullToRefresh，并使用它实现列表的上拉加载和下拉刷新。

先上个效果图：

首先使用ohpm安装PullToRefresh：

ohpm install @ohos/pulltorefresh

用法和常用参数：

PullToRefresh({

        // 必传项，列表组件所绑定的数据

        data: $newsData,

        // 必传项，需绑定传入主体布局内的列表或宫格组件

        scroller: this.scroller,

        // 必传项，自定义主体布局，内部有列表或宫格组件

        customList: () => {

          // 一个用@Builder修饰过的UI方法

        },

        // 可选项，下拉刷新回调

        onRefresh: () => {



        },

        // 可选项，上拉加载更多回调

        onLoadMore: () => {



        },

      })

下面是效果图的全部实现代码，列表数据来自本地json文件：

import { PullToRefresh } from '@ohos/pulltorefresh'

import util from '@ohos.util';

@Entry

@Component

struct Index {

  // 需绑定列表或宫格组件

  private scroller: Scroller = new Scroller();

  @State newsData: NewsData[] = []



  onPageShow(): void {

    this.getData('news.json')

  }



  getData(contentFile:string){

    let data = getContext(this).resourceManager.getRawFileContent(contentFile,(err,value)=> {

      let view: Uint8Array = new Uint8Array(value); // 使用Uint8Array读取arrayBuffer的数据

      let textDecoder: util.TextDecoder = util.TextDecoder.create(); // 调用util模块的TextDecoder类

      let res: string = textDecoder.decodeWithStream(view); // 对view解码

      let strArr:object[] = JSON.parse(res)

      let list:object[] = strArr['data']['list'];

      for (let i = 0; i < list.length; i++) {

        const contactTemp = new NewsData(list[i]['title'], list[i]['time'],list[i]['pic']);

        this.newsData.push(contactTemp);

      }

    })

  }



  build() {

    Row() {



      PullToRefresh({

        // 必传项，列表组件所绑定的数据

        data: $newsData,

        // 必传项，需绑定传入主体布局内的列表或宫格组件

        scroller: this.scroller,

        // 必传项，自定义主体布局，内部有列表或宫格组件

        customList: () => {

          // 一个用@Builder修饰过的UI方法

          this.getListView();

        },

        // 可选项，下拉刷新回调

        onRefresh: () => {

          return new Promise((resolve, reject) => {

            // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据

            setTimeout(() => {

              resolve('刷新成功');

              this.newsData = [];

              this.getData('news.json')

            }, 2000);

          });

        },

        // 可选项，上拉加载更多回调

        onLoadMore: () => {

          return new Promise((resolve, reject) => {

            // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据

            setTimeout(() => {

              resolve('');

              this.getData('newsmore.json')

            }, 2000);

          });

        },

        customLoad: null,

        customRefresh: null,

      })

    }

    .height('100%')

  }



  // 必须使用@Builder修饰方法

  @Builder

  private getListView() {

    List({

      space: 3, scroller: this.scroller

    }) {

      ForEach(this.newsData, (item: NewsData,index) => {

        ListItem() {

          Row(){

            Image(item.newsPic)

              .width(80)

              .height(80)

            Column(){

              Text(item.newsTitle)

                .fontSize(18)

                .fontColor(Color.Black)

              Text(item.newsTime)

                .fontSize(16)

                .fontColor(Color.Gray)

            }

            .padding({top:10,bottom:10})

            .margin({left:10})

            .justifyContent(FlexAlign.SpaceBetween)

            .height(90)

            .alignItems(HorizontalAlign.Start)

          }

          .height(90)

          .padding({left:10,right:30,top:5,bottom:5})

          .width('100%')

        }

        .height(90)

      }, (item: NewsData, index?: number) => JSON.stringify(item) + index);

    }

    .divider({ strokeWidth: 0.5, color: Color.Gray, startMargin: 20, endMargin: 0 })

    .width('100%')

    .backgroundColor('#f1f3f5')

    // TODO: 知识点：必须设置列表为滑动到边缘无效果，否则无法触发pullToRefresh组件的上滑下拉方法。

    .edgeEffect(EdgeEffect.None)

  }



  aboutToDisappear() {

    this.newsData = [];

  }

}



// 新闻数据对象

class NewsData {

  newsTitle: string

  newsTime: string

  newsPic: string



  constructor( newsTitle: string, newsTime: string, newsPic: string) {

    this.newsTitle = newsTitle;

    this.newsTime = newsTime;

    this.newsPic = newsPic;

  }

}