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

分页加载关键字:onReachEnd

一、申请网络权限

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

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

二、创建数据结构体

export default class NewsInfo {title: string = ''thumbnail: string = ''publish_time: string = ''source: string = ''origin: string = ''
}
import NewsInfo from '../viewmodel/NewsInfo'export default class NewsData {code: string = ''data: NewsInfo[] = []
}

三、封装网络请求

import NewsData from '../viewmodel/NewsData';
import http from '@ohos.net.http';class NewsModel {baseURL: string = 'https://china.nba.cn/cms/v1'pageNo: number = 1getNewsList(): 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 布局

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%')}}
}

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

import NewsInfo from '../viewmodel/NewsInfo'
import NewsItem from '../views/NewsItem'
import NewsModel from '../model/NewsModel'@Entry
@Component
struct Index {@State news: NewsInfo[] = []isLoading: boolean = falseisMore: boolean = trueaboutToAppear(): 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 = falseif (!newsData.data || newsData.data.length == 0) {this.isMore = false}})}
}

六、效果演示

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/48859.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全常用易混术语定义与解读(Top 20)

没有网络安全就没有国家安全&#xff0c;网络安全已成为每个人都重视的话题。随着技术的飞速发展&#xff0c;各种网络攻击手段层出不穷&#xff0c;保护个人和企业的信息安全显得尤为重要。然而&#xff0c;在这个复杂的领域中&#xff0c;许多专业术语往往让人感到困惑。为了…

portainer教程-docker可视化管理工具

很多朋友刚接触docker 学习&#xff0c;就想问 docker有图形化界面吗 &#xff0c;答案是肯定的&#xff0c; 这里白眉大叔 给大家推荐 Docker可视化管理平台 -- Portainer 1- 运行Portainer&#xff1a; docker run -d -p 8000:8000 -p 9000:9000 --name portainer --restarta…

【保姆级讲解C语言中的运算符的优先级!】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 🪶C语言中的运算符的优先级 🪶C语言中的运算符的优先级决定了…

二、C#数据类型

本文是网页版《C# 12.0 本质论》第二章解读。欲完整跟踪本系列文章&#xff0c;请关注并订阅我的Essential C# 12.0解读专栏。 前言 数据类型&#xff08;Data Type&#xff09;是一个很恼人的话题。 似乎根本没必要对数据类型进行展开讲解&#xff0c;因为人人都懂。 但是…

16、基于共享内存二叉树的LRU

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 在共享内存的二叉树上尝试了LR…

grafana大坑,es找不到时间戳 | No date field named timestamp found

grafana大坑&#xff0c;es找不到时间戳。最近我这边的es重新装了一遍&#xff0c;结果发现grafana连不上elasticsearch了&#xff08;以下简称es&#xff09;&#xff0c;排查问题查了好久一直以为是es没有装成功或者两边的版本不兼容&#xff0c;最后才发现是数值类型问题 一…

XSLFO 文档:格式化 XML 数据的艺术

XSLFO 文档&#xff1a;格式化 XML 数据的艺术 1. 引言 XSLFO&#xff08;Extensible Stylesheet Language Formatting Objects&#xff09;是一种基于 XML 的语言&#xff0c;用于描述如何将 XML 数据格式化为可视化的文档&#xff0c;如 PDF 或打印的页面。XSLFO 提供了一种…

过滤器、同步异步、跨域问题、json数据格式字符串

1、过滤器 过滤器是将JavaEE中对请求和响应进行拦截的技术&#xff0c;定义一个类实现Filter接口&#xff0c;可以让某些请求地址在到达servlet之前进入到指定的过滤器中从而实现统一管理&#xff0c;例如编码过滤&#xff0c;权限过滤等进行统一过滤。 下面是一个编码过滤的…

Java 基础语法教程

1. 类和对象 Java 是一种面向对象的编程语言&#xff0c;它使用类和对象来组织代码。一个 Java 程序可以认为是一系列对象的集合&#xff0c;而这些对象通过调用彼此的方法来协同工作。 1.1 类 类&#xff08;Class&#xff09;是一个模板&#xff0c;它描述一类对象的行为和…

浅聊 Three.js 屏幕空间反射SSR-SSRShader

浅聊 Three.js 屏幕空间反射SSR(2)-SSRShader 前置基础 渲染管线中的相机和屏幕示意图 -Z (相机朝向的方向)||| -------------- <- 屏幕/投影平面| | || | || | (f) | <- 焦距| | ||…

在 Ubuntu 22.04/20.04 安装 CVAT 和 SAM 指南

1. 安装 Docker 和 Docker Compose sudo apt-get update sudo apt-get --no-install-recommends install -y \apt-transport-https \ca-certificates \curl \gnupg-agent \software-properties-common curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-ke…

跨平台游戏引擎 Axmol-2.1.4 发布

2.1.4 版本是用于错误修复和改进的次要 LTS 版本&#xff0c;感谢 axmol 的所有贡献者 相对于 2.1.3 的重大变化&#xff1a; 添加 JobSystem 支持添加 cmake 选项 AX_WASM_INITIAL_MEMORY添加 Linux WebView 实现改进 curl 下载实现 使用curl_multi_poll代替select使用curl_…

java-如何打破双亲委派机制

在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;双亲委派模型是一种类加载器之间的层次模型&#xff0c;它定义了类加载的规则&#xff0c;即当一个类需要被加载时&#xff0c;JVM默认的行为是首先请求父类加载器加载该类&#xff0c;只有当父类加载器无法加载该类时&a…

【BUG】已解决:error: legacy - install - failure

error: legacy - install - failure 目录 error: legacy - install - failure 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&…

51单片机14(独立按键实验)

一、按键介绍 1、按键是一种电子开关&#xff0c;使用的时候&#xff0c;只要轻轻的按下我们的这个按钮&#xff0c;按钮就可以使这个开关导通。 2、当松开这个手的时候&#xff0c;我们的这个开关&#xff0c;就断开开发板上使用的这个按键&#xff0c;它的内部结构&#xff…

免费分享:2021年度全国城乡划分代码(附下载方法)

《关于统计上划分城乡的规定》指出&#xff1a;“本规定作为统计上划分城乡的依据&#xff0c;不改变现有的行政区划、隶属关系、管理权限和机构编制&#xff0c;以及土地规划、城乡规划等有关规定”。统计用区划代码和城乡划分代码用于统计工作&#xff0c;需要在其他工作中使…

Transforms

深度学习中的Transforms 概述 Transforms在深度学习中起到了关键的作用&#xff0c;主要用于数据预处理、特征提取和数据增强&#xff08;Data Augmentation&#xff09;。通过对数据进行各种变换&#xff0c;能够提升模型的训练效果和泛化能力。 数据增强&#xff08;Data …

回溯题目的套路总结

前言 昨天写完了LeeCode的7&#xff0c;8道回溯算法的题目&#xff0c;写一下总结&#xff0c;这类题目的共同特点就是暴力搜索问题&#xff0c;排列组合或者递归&#xff0c;枚举出所有可能的答案&#xff0c;思路很简单&#xff0c;实现起来的套路也很通用&#xff0c;一…

java题目之抽奖以及优化方式

public class Main9 {public static void main(String[] args) {int[]arr{ 2,588,888,1000,10000};int [] newArrnew int[arr.length];//3.抽奖Random rnew Random();//因为有5个奖项,所以这里循环五次for (int i 0; i <5 ; ) {//获取随机索引int randomIndexr.nextInt(arr…

前端-模拟请求数据mook第三方插件 json-server的使用

大纲 第一步下载第二配置mook的数据源第三配置启动命令第四运行模拟服务第五测试接口如果要进行更复杂的操作 第一步下载 npm install json-server -D"devDependencies": {"json-server": "^1.0.0-beta.1"}第二配置mook的数据源 在项目的根目录…