HarmonyOS NEXT星河版之实战商城App瀑布流(含加载更多)

文章目录

    • 一、目标
    • 二、开撸
      • 2.1 声明商品对象
      • 2.2 mock数据
      • 2.3 主页面
      • 2.4 加载更多
      • 2.5 完整代码
    • 三、小结

一、目标

在这里插入图片描述

二、开撸

2.1 声明商品对象

export interface GoodsItem {title: stringimageUrl: string
}

2.2 mock数据

export const mockGoodsList: GoodsItem[] = [{title: '宁雨昔美式复古字母三条杠圆领短袖T恤女纯棉宽松2024夏季新款学生上衣 白色 M',imageUrl: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/145307/22/41197/71267/65b5d932Fb67b2c27/cd986ae610999146.jpg!q70.jpg.webp'},{title: '京东京造【抗菌小白T】5A抑菌抗发黄T恤男新疆棉t恤男夏短袖打底T 白色L',imageUrl: 'https://img10.360buyimg.com/n2/s370x370_jfs/t1/230742/32/2823/51634/65520517F4c4f8ffb/6b8d81f6664085c6.jpg!q70.jpg.webp'},{title: 'YOOOURTHING男士休闲夹克青年时尚休闲连帽外套男薄款春秋季夹克男装 XZ1402-2130-卡其色 2XL【建议120-150斤】',imageUrl: 'https://img13.360buyimg.com/n2/s370x370_jfs/t1/100084/4/36774/78306/6423d6a8F913e76ad/80a8cdf35c09e19c.jpg!q70.jpg.webp'},{title: 'ZARA女装夏季新款宽松短袖T恤女 黑色 M',imageUrl: 'https://img10.360buyimg.com/n2/s370x370_jfs/t1/134131/23/44409/75625/661c013dF4a6fba04/3166211e54969778.jpg!q70.jpg.webp'},{title: '优衣库UT印花T恤女款 纯棉舒适圆领短袖上衣 白色 S',imageUrl: 'https://img14.360buyimg.com/n2/s370x370_jfs/t1/103976/1/31353/115998/630cc1cdE3a4eede9/bc1bc0bc560b775e.jpg!q70.jpg.webp'},{title: '小米手环5 智能运动手表 血氧检测心率监测 多功能NFC 时尚简约 黑色',imageUrl: 'https://img14.360buyimg.com/n2/s370x370_jfs/t1/100923/8/44254/52554/64f03948Fe911c342/59bea895f9ebdd38.jpg!q70.jpg.webp'},{title: '华为荣耀X10 5G手机 双模5G全网通 6GB+128GB 蓝水翡翠 移动联通电信5G 双卡双待手机',imageUrl: 'https://img0.baidu.com/it/u=2707221971,2703286647&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=287'},{title: 'Apple MacBook Air 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/256GB固态硬盘)',imageUrl: 'https://img01.yzcdn.cn/upload_files/2020/05/21/FjX6bDV0pc4jSBKXgbDcDvtErMzR.jpg%21middle.jpg'},{title: '华为MateBook D 14 2020款 14英寸轻薄笔记本电脑(AMD Ryzen 5 3500U处理器/8GB内存/512GB固态硬盘)深空灰',imageUrl: 'https://img01.yzcdn.cn/upload_files/2017/10/19/FlYiuiKI5L17wHoALIx_txbCeOME.jpg%21middle.jpg'},{title: '联想(Lenovo)小新Pro13高性能轻薄本笔记本电脑 13.3英寸全面屏学生办公商务便携轻薄本(标压R5-3550H 16G 512G FHD IPS)银',imageUrl: 'https://img2.baidu.com/it/u=1282939547,1976310423&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500'}
]

2.3 主页面

import { GoodsItem, mockGoodsList } from './modules';@Entry
@Component
struct WaterFlowGoodsPage {@State goodsList: GoodsItem[] = mockGoodsListbuild() {WaterFlow() {ForEach(this.goodsList, (item: GoodsItem, index: number) => {FlowItem() {Column({ space: 5 }) {Image(item.imageUrl).height(index % 2 ? 120 : 180).borderRadius(8)Text(item.title).fontSize(14).lineHeight(22).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis })}}})}.height('100%').columnsTemplate('1fr 1fr').columnsGap(10).rowsGap(10).padding(10)}
}

2.4 加载更多

在滑动到底部时,加载更多数据,如下:
在这里插入图片描述
WaterFlow参数中有footer,代表了底部内容。增加getFooter方法,如下:

@Builder
getFooter() {Row() {Text('加载更多...')}.justifyContent(FlexAlign.Center).backgroundColor(Color.Pink).height(60).width('100%')}

WaterFlow设置footer

WaterFlow({ footer: this.getFooter }) {}

设置变量isLoadMore判断是否正在加载中:

@State isLoadMore: boolean = false

设置WaterFlow的滑动到底部事件:

// 滑动到底部
.onReachEnd(async () => {if (!this.isLoadMore) {try {this.isLoadMore = trueawait this.loadMore()this.isLoadMore = false} catch (error) {promptAction.showToast({ message: JSON.stringify(error) })}}
})

加载更多数据方法:

/*** 加载更多* @returns*/
loadMore() {return new Promise<boolean>((resolve, reject) => {// mock网络请求setTimeout(() => {this.goodsList.push(...this.goodsList.slice(0, 5))}, 2000)resolve(true)})
}

2.5 完整代码

import { GoodsItem, mockGoodsList } from './modules';
import { promptAction } from '@kit.ArkUI';@Entry
@Component
struct WaterFlowGoodsPage {@State goodsList: GoodsItem[] = mockGoodsList@State isLoadMore: boolean = false@BuildergetGoodsItemView(item: GoodsItem, index: number) {Column({ space: 5 }) {Image(item.imageUrl).height(index % 2 ? 120 : 180).borderRadius(8)Text(item.title).fontSize(14).lineHeight(22).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis })}}@BuildergetFooter() {Row() {Text('加载更多...')}.justifyContent(FlexAlign.Center).backgroundColor(Color.Pink).height(60).width('100%')}build() {WaterFlow({ footer: this.getFooter }) {ForEach(this.goodsList, (item: GoodsItem, index: number) => {FlowItem() {this.getGoodsItemView(item, index)}})}.height('100%').columnsTemplate('1fr 1fr').columnsGap(10).rowsGap(10).padding(10)// 滑动到底部.onReachEnd(async () => {if (!this.isLoadMore) {try {this.isLoadMore = trueawait this.loadMore()this.isLoadMore = false} catch (error) {promptAction.showToast({ message: JSON.stringify(error) })}}})}/*** 加载更多* @returns*/loadMore() {return new Promise<boolean>((resolve, reject) => {// mock网络请求setTimeout(() => {this.goodsList.push(...this.goodsList.slice(0, 5))}, 2000)resolve(true)})}
}

三、小结


http://www.ppmy.cn/news/1434617.html

相关文章

Android判断应用是否在前台运行

Android判断应用是否在前台运行 /*** Android判断应用是否在前台运行* 0&#xff1a;异常&#xff1b;1&#xff1a;前台&#xff1b;2&#xff1a;后台&#xff1b;3&#xff1a;未运行&#xff1b;*/private int isFrontShow(Context context) {if (context null) {ret…

动力学重构/微分方程参数拟合 - 基于模型

这一篇文章&#xff0c;主要是给非线性动力学&#xff0c;对微分方程模型参数拟合感兴趣的朋友写的。笼统的来说&#xff0c;这与混沌系统的预测有关&#xff1b;传统的机器学习的模式识别虽然也会谈论预测结果&#xff0c;但他们一般不会涉及连续的预测。这里我们考虑的是&…

Linux读写文件

前言 学习了文件系统&#xff0c;就能理解为什么说Linux下一切皆文件。 语言层面的操作 在c语言的学习中我们可以使用fopen()函数对文件进行操作。 int main() {//FILE * fp fopen("./log.txt", "w");//FILE * fp fopen("./log.txt", "…

Music Tag Editor Pro for Mac:音乐标签编辑软件

Music Tag Editor Pro for Mac是一款功能强大的音乐标签编辑软件&#xff0c;专为Mac用户设计&#xff0c;旨在帮助用户轻松管理音乐库中的标签信息。 Music Tag Editor Pro for Mac v8.0.0中文激活版下载 该软件支持多种音频格式&#xff0c;包括MP3、M4A、FLAC、APE等&#x…

Midjourney如何实现人物角色的一致性?

在数字艺术和AI生成媒体的发展中&#xff0c;保持人物一致性是一个巨大的挑战。Midjourney作为一个先进的图像生成平台&#xff0c;它如何确保在连续的图像生成过程中&#xff0c;同一人物能保持一致的外观和特征呢&#xff1f;本文将深入探讨Midjourney如何通过技术手段实现这…

人工智能论文GPT-3(1):2020.5 Language Models are Few-Shot Learners;摘要;引言;scaling-law

摘要 近期的工作表明&#xff0c;在大量文本语料库上进行预训练&#xff0c;然后针对特定任务进行微调&#xff0c;可以在许多NLP任务和基准测试中取得实质性进展。虽然这种方法在架构上通常是与任务无关的&#xff0c;但仍然需要包含数千或数万示例的针对特定任务的微调数据集…

SpringMVC基础篇(二)

文章目录 1.Postman1.基本介绍Postman是什么&#xff1f; 2.Postman快速入门1.Postman下载点击安装自动安装在系统盘 2.基本操作1.修改字体大小2.ctrl “” 放大页面3.进入创建请求界面 2.需求分析3.具体操作4.保存请求到文件夹中1.点击保存2.创建新的文件夹3.保存成功 3.使用…

互联网轻量级框架整合之MyBatis动态SQL

MyBatis的动态SQL是一项强大且实用的功能&#xff0c;它允许开发者在XML映射文件中编写可灵活变化的SQL语句&#xff0c;这些语句能够根据传入参数的条件或值动态地调整其结构和内容。这样&#xff0c;程序可以在运行时生成适应特定业务场景的SQL&#xff0c;避免了手动拼接SQL…

css文字和span在一行对不齐

1.需求背景 父盒子中有两个span&#xff0c;但是span中的文字对不齐。如下图&#xff0c;明显右边的文字偏高 处理后的效果&#xff08;已经对齐&#xff0c;图中标记的是基本的div结构&#xff09;&#xff1a; 2.该问题出现的原因&#xff1a; span1设置的高度比span2内…

设计模式——2_A 访问者(Visitor)

文章目录 定义图纸一个例子&#xff1a;如何给好奇宝宝提供他想知道的内容菜单、菜品和配方Menu(菜单) & Cuisine(菜品)Material(物料、食材) 产地、有机蔬菜和卡路里Cuisine & Material 访问者VisitorCuisine & Material 碎碎念访问者和双分派访问者和代理写在最后…

VBA之正则表达式(45)-- 提取SQL语句中的函数

实例需求&#xff1a;数据工程师或者DBA日常工作中大量使用SQL语句&#xff0c;有些语句&#xff08;或者存储过程&#xff09;行数非常多&#xff0c;现在需要提取其中的所有使用了函数的相关部分&#xff0c;对于如下语句&#xff0c;需要提取Mid([编号],2,4) AS [产品]和dat…

【上海大学计算机组成原理实验报告】四、指令系统实验

一、实验目的 了解指令结构、PC寄存器的功能和指令系统的基本工作原理。 学习设计指令的方法。 二、实验原理 根据实验指导书的相关内容&#xff0c;对于部分使用频率很高&#xff0c;且只用几条微指令即可完成的简单操作&#xff0c;可以把这部分简单操作的微指令序列固定下…

扩散卷积模型 笔记

1 Title Diffusion Convolutional Neural Networks&#xff08;James Atwood and Don Towsley&#xff09;【NeurIPS 2016】 2 Conclusion This paper presents diffusion-convolutional neural networks (DCNNs), a new model for graph-structured data. Through the introd…

13个Java基础面试题

Hi&#xff0c;大家好&#xff0c;我是王二蛋。 金三银四求职季&#xff0c;特地为大家整理出13个 Java 基础面试题&#xff0c;希望能为正在准备或即将参与面试的小伙伴们提供些许帮助。 后续还会整理关于线程、IO、JUC等Java相关面试题&#xff0c;敬请各位持续关注。 这1…

python常见语法

变量赋值&#xff1a; my_var 10 基本数据类型&#xff1a; 整数&#xff08;int&#xff09;、浮点数&#xff08;float&#xff09;、字符串&#xff08;str&#xff09;、布尔值&#xff08;bool&#xff09;、列表&#xff08;list&#xff09;、元组&#xff08;tuple&…

myql 获取二维数组字符串的最后一个值

继续《mysql 存储过程和函数》的实战&#xff1a; 要分离字符串&#xff1a;[["1","1007","1007012"],["5","5005"],["6","6002","6002005"],["7","7003"],["8&quo…

零基础入门学习Python第一阶10图形用户界面和游戏开发

图形用户界面和游戏开发 基于tkinter模块的GUI GUI是图形用户界面的缩写&#xff0c;图形化的用户界面对使用过计算机的人来说应该都不陌生&#xff0c;在此也无需进行赘述。Python默认的GUI开发模块是tkinter&#xff08;在Python 3以前的版本中名为Tkinter&#xff09;&…

Python-VBA函数之旅-getattr函数

目录 一、getattr函数的常见应用场景&#xff1a; 二、getattr函数使用注意事项&#xff1a; 1、getattr函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&#xff1a;https://blog.csdn.net/ygb_1024?spm1010.21…

Linux进程详解三:进程状态

文章目录 进程状态Linux下的进程状态运行态-R阻塞态浅度休眠-S深度睡眠-D暂停状态-T暂停状态-t 终止态僵尸-Z死亡-X 孤儿进程 进程状态 进程的状态&#xff0c;本质上就是一个整型变量&#xff0c;在task_struct中的一个整型变量。 状态的存在决定了你的后续行为动作。 Linu…

【Linux】日志分析与管理

作为一个运维&#xff0c;如果不会看日志&#xff0c;就好比是冬天刚刚用热水泡完了脚&#xff0c;接着就立马让人把水喝掉。 目录 一、Inode介绍 1.1 什么是inode 1.2 inode表内容 1.3 查看inode号的方式 二、日志分析 2.1 日志的用途 2.2 日志的分类 2.3 日志级别 2…