鸿蒙ArkUI 宫格+列表+HttpAPI实现

鸿蒙ArkUI学习实现一个轮播图、一个九宫格、一个图文列表。然后请求第三方HTTPAPI加载数据,使用了axios鸿蒙扩展库来实现第三方API数据加载并动态显示数据。

import {navigateTo
} from '../common/Page'import axios, {AxiosResponse
} from '@ohos/axios'interface IDataDataAttr {"title": string
}
interface IDataData {"img": string,"remark": string,"id": number,"title": string,"attr": IDataDataAttr
}
interface IData {"msg": string,"code": number,"data": IDataData[]
}@Entry
@Component
export struct Index {@Provide data: IData = {"code": 0,"msg": "","data": [{"title": "","remark": "","id": 0,"attr": {"title": ""},"img": ""}]}async dataApi() {try {const response: AxiosResponse = await axios.post < IData,AxiosResponse < IData > , null > ('https://php.diygw.com/article.php');this.data = response ? response.data : null} catch (error) {console.error(JSON.stringify(error));}}async onPageShow() {await this.dataApi()}async aboutToAppear() {await this.onPageShow()}build() {Column() {Navigation().width('100%').height('56vp').backgroundColor('#07c160').title(this.NavigationTitle()).titleMode(NavigationTitleMode.Mini).align(Alignment.Center).hideBackButton(true)Scroll() {Flex({direction: FlexDirection.Column}) {Flex() {Swiper() {Column() {Image($r('app.media.pic1')).objectFit(ImageFit.Fill).width('100%').height('150vp')Text('滑块一').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({y: 110})}Column() {Image($r('app.media.pic2')).objectFit(ImageFit.Fill).width('100%').height('150vp')Text('滑块二').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({y: 110})}Column() {Image($r('app.media.pic3')).objectFit(ImageFit.Fill).width('100%').height('150vp')Text('滑块三').width('100%').textAlign(TextAlign.Start).backgroundColor("rgba(0,0,0,0.28)").padding(10).position({y: 110})}}.interval(3000).autoPlay(true).loop(true).indicatorStyle({size: 30,selectedColor: '#fff',color: 'rgba(51, 51, 51, 0.39)'})}Grid() {ForEach(this.data.data, (item) => {GridItem() {Column({space: 5}) {Image(item.img).objectFit(ImageFit.Fill).width('42vp').height('42vp')Text(item.title).fontSize('12fp').width('100%').textAlign(TextAlign.Center)}.width('100%')}}, item => JSON.stringify(item));}.padding({top: '10vp',bottom: '10vp'}).height(Math.ceil(this.data.data.length / 3) * 71 + 20).columnsTemplate('1fr 1fr 1fr ').rowsGap(15).layoutDirection(GridDirection.Row)List() {ListItem() {Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Center,}) {Image($r('app.media.grid1')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp')Column() {Text('菜单一').fontSize('14fp').width('100%')Text('说明文字').fontSize('12fp').width('100%')}.padding({left: 5})Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')}.width('100%')}.padding(15).borderWidth({bottom: 1}).borderColor('#efefef')ListItem() {Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Center,}) {Image($r('app.media.grid2')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp')Column() {Text('菜单二').fontSize('14fp').width('100%')Text('说明文字').fontSize('12fp').width('100%')}.padding({left: 5})Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')}.width('100%')}.padding(15).borderWidth({bottom: 1}).borderColor('#efefef')ListItem() {Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Center,}) {Image($r('app.media.grid3')).flexShrink(0).objectFit(ImageFit.Fill).width('42vp').height('42vp')Column() {Text('菜单三').fontSize('14fp').width('100%')Text('说明文字').fontSize('12fp').width('100%')}.padding({left: 5})Image($r('app.media.ic_arrow')).flexShrink(0).objectFit(ImageFit.Contain).width('12vp').height('24vp')}.width('100%')}.padding(15).borderWidth({bottom: 1}).borderColor('#efefef')}}.height('100%')}.height('100%').layoutWeight(1)}.alignItems(HorizontalAlign.Start).height('100%')}@BuilderNavigationTitle() {Column() {Text('首页').width('100%').textAlign(TextAlign.Center).height('28vp').fontSize('20fp').fontWeight(500).fontColor('#fff')}}}

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

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

相关文章

第5章 (python深度学习——波斯美女)

第5章 深度学习用于计算机视觉 本章包括以下内容&#xff1a; 理解卷积神经网络&#xff08;convnet&#xff09; 使用数据增强来降低过拟合 使用预训练的卷积神经网络进行特征提取 微调预训练的卷积神经网络 将卷积神经网络学到的内容及其如何做出分类决策可视化 本章将…

Android 性能优化总结:包体积优化

前言 随着开发不断迭代&#xff0c;App体积越来越大&#xff0c;包大小的增大也会给我们应用带来其他的影响 比如 下载率影响 过大的包体积会影响下载转化率&#xff0c;根据Google Play Store包体积和转化率分析报告显示&#xff0c;平均每增加1M&#xff0c;转化率下降0.2%左…

基于Java SSM框架实现大学生综合素质评分平台项目【项目源码+论文说明】

基于java的SSM框架实现大学生综合素质评分平台演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所…

C#调用SqlSugar操作达梦数据库报错“无效的表或视图名”

安装达梦数据库后&#xff0c;使用SqlSugar连接测试数据库并基于DBFirst方式创建数据库表对应的类&#xff0c;主要代码如下&#xff1a; SqlSugarClient db new SqlSugarClient(new ConnectionConfig(){DbType DbType.Dm,ConnectionString "Serverlocalhost; User Id…

【ArcGIS模型构建器】07:批量将多个xy坐标(Excel、txt、csv)转为点shp图层

不需要写Python批处理代码,本讲利用模型构建器,批量将xy坐标(Excel、txt、csv)转为点shp图层。 文章目录 一、问题分析二、解决办法三、模型构建1. 新建模型2. 添加文件夹3. 添加表迭代器4. 创建XY事件图层5. 复制要素6. 运行模型四、注意事项一、问题分析 现有多个excel、t…

qemu单步调试arm64 linux kernel

一、背景和目的 qemu搭建arm64 linux kernel环境-CSDN博客 之前介绍了qemu启动kernel的配置步骤和方法&#xff0c;现在开始我们的调试&#xff0c;这篇文章主要讲解如何单步调试内核&#xff0c;所有的实验还是基于ARM64&#xff1b; 二、环境准备 需要准备hostx86 target…

Python系列(9)—— 比较运算符

在Python中&#xff0c;比较运算符用于比较两个值的大小关系&#xff0c;如等于、不等于、大于、小于等。这些运算符可以帮助我们进行各种比较操作&#xff0c;并返回布尔值&#xff08;True或False&#xff09;。下面我们将详细介绍Python中的比较运算符。 等于运算符&#x…

容器化部署 Jenkins,并配置SSH远程操作服务器

目录 一、Jenkins是什么 二、常见的部署Jenkins的方法 三、为什么选择容器化部署 四、容器化部署Jenkins步骤 1、安装 Docker 2、获取 Jenkins 镜像 3、创建并运行容器 4、访问 Jenkins 4.1 查看初始密码问题 5、配置 Jenkins 5.1 安装插件 5.2 创建管理员用户 5.3…

一维数组的学习

前言 数组&#xff08;Array&#xff09;是有序的元素序列。若将有限个类型相同的变量的集合命名&#xff0c;那么这个名称为数组名。组成数组的各个变量称为数组的分量&#xff0c;也称为数组的元素&#xff0c;有时也称为下标变量。用于区分数组的各个元素的数字编号称…

Python之FastAPI框架~浅谈sqlalchemy与tortoise

1.前言 一直想理解清楚FastAPI框架的异步框架tortoise&#xff0c;据说这个框架使用起来能够更好地与FastAPI异步框架继承&#xff0c;但是FastAPI框架官方介绍的是sqlalchemy框架&#xff0c;它是同步的&#xff0c;是不支持await的。所以跟数据库进行交互时候&#xff0c;使…

Java项目实战--瑞吉外卖DAY03

目录 P22新增员工_编写全局异常处理器 P23新增员工_完善全局异常处理器并测试 p24新增员工_小结 P27员工分页查询_代码开发1 P28员工分页查询_代码开发2 P22新增员工_编写全局异常处理器 在COMMON新增全局异常捕获的类&#xff0c;其实就是代理我们这些controlle。通过aop把…

spring+drools

引入依赖 <dependency><groupId>com.github.hongwen1993</groupId><artifactId>fast-drools-spring-boot-starter</artifactId><version>8.0.8</version><scope>compile</scope> </dependency>yml配置 spring: …

基于SSM+Shiro+Druid实现的企业资产后台管理系统

系统介绍 系统演示 关注【全栈小白】视频号查看演示视频 随着企业的发展&#xff0c;很多中小企业的规模越来越大&#xff0c;需要管理资产也越来越多&#xff0c;比如显示器&#xff0c;主机&#xff0c;打印机&#xff0c;传真机&#xff0c;复印机&#xff0c;电话&#…

C++提高编程——STL:list容器、set容器和map容器

本专栏记录C学习过程包括C基础以及数据结构和算法&#xff0c;其中第一部分计划时间一个月&#xff0c;主要跟着黑马视频教程&#xff0c;学习路线如下&#xff0c;不定时更新&#xff0c;欢迎关注。 当前章节处于&#xff1a; ---------第1阶段-C基础入门 ---------第2阶段实战…

洛谷p1036选数

[NOIP2002 普及组] 选数 题目描述 已知 n n n 个整数 x 1 , x 2 , ⋯ , x n x_1,x_2,\cdots,x_n x1​,x2​,⋯,xn​&#xff0c;以及 1 1 1 个整数 k k k&#xff08; k < n k<n k<n&#xff09;。从 n n n 个整数中任选 k k k 个整数相加&#xff0c;可分别得…

SAP-PP: BOM选择标识不存在

在MM03 中选择生产版本无法打开 原因是未维护 BOM选择标识 配置路径&#xff1a;生产→物料需求计划→工厂参数→执行工厂参数总体维护→BOM/工艺路线选择 T-CD: OPPQ

flutter极光推送配置厂商通道(华为)笔记--进行中

一、基础集成按照下面官方文档进行 厂商通道相关参数申请教程 集成厂商 集成指南 官方文档&#xff1a;厂商通道回执配置指南 注意&#xff1a;不同厂商对app上架的要求不同&#xff0c;华为、荣耀 对app上架没有硬性要求 遇到问题 1、引入apply plugin: com.huawei.agconn…

Jenkins部署及应用

一. 简介 二. 下载地址源&#xff1a; …

Docker部署Stable-Diffusion-webui

前排提示&#xff1a;如果不想折腾&#xff0c;可直接跳到最后获取封装好的容器&#xff0c;一键运行 :D 前言 乘上AI生成的快车&#xff0c;一同看看沿途的风景。 启一个miniconda容器 docker run -itd -v 宿主机内SD项目路径:/tmp --gpus all --ipc host -p 7860:7860 con…

机器学习---可能近似正确(PAC)、出错界限框架

1. 计算学习理论概述 从理论上刻画了若干类型的机器学习问题中的困难和若干类型的机器学习算法的能力 这个理论要回答的问题是&#xff1a; 在什么样的条件下成功的学习是可能的&#xff1f; 在什么条件下某个特定的学习算法可保证成功运行&#xff1f; 这里考虑两种框架&…