【HarmonyOS NEXT】网络请求 - 分页加载

分页加载关键字:onReachEnd

一、申请网络权限

module.json5 文件中,添加网络权限:

json 复制代码
{
  "module": {
    
    ...

    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "usedScene": {
          "when": "always"
        }
      }
    ]
  }
}

二、创建数据结构体

ts 复制代码
export default class NewsInfo {
  title: string = ''
  thumbnail: string = ''
  publish_time: string = ''
  source: string = ''
  origin: string = ''
}
ts 复制代码
import NewsInfo from '../viewmodel/NewsInfo'

export default class NewsData {
  code: string = ''
  data: NewsInfo[] = []
}

三、封装网络请求

ts 复制代码
import NewsData from '../viewmodel/NewsData';
import http from '@ohos.net.http';

class NewsModel {
  baseURL: string = 'https://china.nba.cn/cms/v1'
  pageNo: number = 1

  getNewsList(): Promise<NewsData> {
    return new Promise((resolve, reject) => {
      let httpRequest = http.createHttp()
      httpRequest.request(
        `${this.baseURL}/news/list?column_id=57&page_size=5&page_no=${this.pageNo}&app_key=tiKB2tNdncnZFPOi&os_type=3&os_version=10.0&app_version=1.0.0&install_id=202111201544&network=wifi&t=1716876416465&device_id=6bdaac33a8df720345a767431e62caf3&channel=nba&sign=48da38cc43775e0efea30a3726328530`,
        {
          method: http.RequestMethod.GET
        }
      )
        .then(response => {
          if (response.responseCode === 200) {
            console.log('查询新闻信息成功!', response.result)
            resolve(JSON.parse(response.result.toString()))
          } else {
            console.log('查询新闻信息失败!error:', JSON.stringify(response))
            reject('查询新闻信息失败')
          }
        })
        .catch((error: Error) => {
          console.log('查询新闻信息失败!error:', JSON.stringify(error))
          reject('查询新闻信息失败')
        })
    })
  }
}

const newsModel = new NewsModel()

export default newsModel as NewsModel

四、创建 item 布局

ts 复制代码
import NewsInfo from '../viewmodel/NewsInfo'

@Component
export default struct NewsItem {
  news: NewsInfo = new NewsInfo()

  build() {
    Column({ space: 5 }) {
      Column() {
        Image(this.news.thumbnail)
        Text(this.news.title)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .ellipsisMode(EllipsisMode.END)
      }
      .width('100%')
    }
  }
}

五、实现网络请求分页加载

ts 复制代码
import NewsInfo from '../viewmodel/NewsInfo'
import NewsItem from '../views/NewsItem'
import NewsModel from '../model/NewsModel'

@Entry
@Component
struct Index {
  @State news: NewsInfo[] = []
  isLoading: boolean = false
  isMore: boolean = true

  aboutToAppear(): void {
    this.loadNewsInfo()
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.news, (news: NewsInfo) => {
          ListItem() {
            NewsItem({ news: news })
          }
        })
      }
      .width('100%')
      .onReachEnd(() => {
        console.log('触底了!')
        if (!this.isLoading && this.isMore) {
          this.isLoading = true
          // 翻页
          NewsModel.pageNo++
          this.loadNewsInfo()
        }
      })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }

  loadNewsInfo() {
    NewsModel.getNewsList()
      .then(newsData => {
        this.news = this.news.concat(newsData.data)
        this.isLoading = false
        if (!newsData.data || newsData.data.length == 0) {
          this.isMore = false
        }
      })
  }
}

六、效果演示

相关推荐
SoraLuna2 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析3 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6683 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
模拟IC攻城狮3 小时前
华为海思招聘-芯片与器件设计工程师-模拟芯片方向- 机试题-真题套题题目——共8套(每套四十题)
嵌入式硬件·华为·硬件架构·芯片
lqj_本人3 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人3 小时前
使用 Flutter 绘制一个棋盘
harmonyos
TangKenny3 小时前
计算网络信号
java·算法·华为
23zhgjx-NanKon4 小时前
华为eNSP:QinQ
网络·安全·华为
23zhgjx-NanKon4 小时前
华为eNSP:mux-vlan
网络·安全·华为
Leo.yuan6 小时前
39页PDF | 华为数据架构建设交流材料(限免下载)
数据结构·华为