当前位置: 首页 > news >正文

鸿蒙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')}}}

相关文章:

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

鸿蒙ArkUI学习实现一个轮播图、一个九宫格、一个图文列表。然后请求第三方HTTPAPI加载数据&#xff0c;使用了axios鸿蒙扩展库来实现第三方API数据加载并动态显示数据。 import {navigateTo } from ../common/Pageimport axios, {AxiosResponse } from ohos/axiosinterface IDa…...

【C++中的STL】常用算法1——遍历算法和查找算法

常用算法1 常用算法常用遍历算法for_eachtransform 常用查找算法findfind_ifadjacent_findbinary_searchcountcount_if 常用算法 算法主要是由头文件<algorithm><functional><numeric>组成。 <algorithm>是所有STL头文件中最大的一个&#xff0c;范围…...

Jmeter性能测试: 基于JDK 21 安装 Jmeter 5.6.3

目录 一、实验 1.环境 2.JDK下载 3.Jmeter下载 4.Windows安装JDK 21 5.Windows安装Jmeter 5.6.3 6.Linux安装JDK 21 7.Linux安装Jmeter 5.6.3 二、问题 1. Linux 的profile、bashrc、bash_profile文件有哪些区别 一、实验 1.环境 &#xff08;1&#xff09;主机 表…...

Linux命令-apropos命令(在 whatis 数据库中查找字符串)

补充说明 apropos命令 在一些特定的包含系统命令的简短描述的数据库文件里查找关键字&#xff0c;然后把结果送到标 准输出。 如果你不知道完成某个特定任务所需要命令的名称&#xff0c;可以使用一个关键字通过Linux apropos实用程 序来搜索它。该实用程序可以搜索关键字并且…...

【算法】解决动态规划问题的通用步骤思路及示例算法:打家劫舍【动态规划】

动态规划(Dynamic Programming,简称DP)是一种解决问题的算法设计技术,通常用于优化问题。它通过将问题分解为更小的子问题,并解决这些子问题,然后合并它们的解决方案来解决原始问题。动态规划通常用于具有重叠子问题和最优子结构性质的问题。 动态规划的主要思想是避免重…...

蓝桥杯之即约分数

求1~N的所有即约分数 公约数求法&#xff1a;可以使用欧几里得除法求得公约数 算法原理&#xff1a; a,b为两个整数&#xff0c;a>b a除以b的商q1和余数r1 如果r1为0&#xff0c;则最大公约数就为b 如果不为0&#xff0c;则继续使用b除以r取商为q2,余r2 如果r2为0&#xff0…...

Pointnet++改进优化器系列:全网首发Sophia优化器 |即插即用,实现有效涨点

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入Sophia优化器,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二 2.3...

1.27回溯(中等)

1.全排列 全排列 II 1.给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 2.给定一个可包含重复数字的序列 nums &#xff0c;按任意顺序 返回所有不重复的全排列。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3…...

sql管理工具archery简介

在平时的工作过程中&#xff0c;我们肯定会遇到使用sql平台的场景&#xff0c;业内也有很多工具&#xff0c;类似阿里云的dms&#xff0c;但是这个是和云厂商绑定的&#xff0c;我们可能一般没有用到阿里云组件就比较困难了&#xff0c;那还有什么选项了&#xff0c;经过调研&a…...

DEM高程地形瓦片数据Cesium使用教程

一、简介 从开始写文章到现在&#xff0c;陆续发布了全球90m、30m(包括哥白尼及ALOS)、12.5m全球级瓦片数据&#xff0c;以及中国12.5、日本10m、新西兰8m、等国家级瓦片数据&#xff0c;同时也发布了台湾20m、中国34省区12.5m等地区级瓦片数据。在数据发布的文章中对数据如何…...

3个精美的wordpress律师网站模板

暗红色WordPress律师事务所网站模板 演示 https://www.zhanyes.com/qiye/23.html 暗橙色WordPress律师网站模板 演示 https://www.zhanyes.com/qiye/18.html 红色WordPress律所网站模板 演示 https://www.zhanyes.com/qiye/22.html...

在windows环境下安装hadoop

Hadoop是一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。但这个架构是基于java语言开发的&#xff0c;所以要先进行jdk的安装&#xff0c;如果电脑已经配置过jdk或者是曾经运行成功过java文件&#xff0c;那就可以跳过第一步。 …...

大数据分析组件Hive-集合数据结构

Hive的数据结构 前言一、array数组类型二、map键值对集合类型三、struct结构体类型 前言 Hive是一个基于Hadoop的数据仓库基础设施&#xff0c;用于处理大规模分布式数据集。它提供了一个类似于SQL的查询语言&#xff08;称为HiveQL&#xff09;&#xff0c;允许用户以类似于关…...

单核QPS近6000S,陌陌基于OceanBase的持久化缓存探索与实践

挚文集团于 2011 年 8 月推出了陌陌&#xff0c;这款立足地理位置服务的开放式移动视频社交应用在中国社交平台领域内独树一帜。陌陌和探探作为陌生人社交领域的主流应用&#xff0c;涵盖了多种核心业务模块&#xff0c;包括直播服务、附近动态功能、即时通讯&#xff08;IM&am…...

关于css 的基础试题

CSS是什么的缩写&#xff1f; A. Creative Style SheetsB. Cascading Style SheetsC. Computer Style SheetsD. Colorful Style Sheets 在HTML中&#xff0c;通过什么标签引入CSS样式&#xff1f; A. <script>B. <style>C. <link>D. <css> 以下哪个选项…...

Keil-C语言小总结

1、 &取地址符&#xff0c;*取地址内容 int *ptr;//声明指针 2、ptr &c; // 将c的地址赋值给指针变量ptr 3、可选参数函数 4、C宏定义 5、 memset&#xff1a;最快的数据清零函数 void *memset(void *s, int ch, size_t n); 分别是 字符串 要值的数据&#xff08;0…...

react的withRouter高阶组件:

withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做. 在 React Router 中&#xff0c;withRouter 是一个函数&#xff0c;用于与路由相关的组件。它接受一个组件作为参数&…...

小程序 样式 WXSS

文章目录 样式 WXSS尺⼨单位样式导⼊选择器⼩程序中使⽤less 样式 WXSS WXSS( WeiXin Style Sheets )是⼀套样式语⾔&#xff0c;⽤于描述 WXML 的组件样式。 与 CSS 相⽐&#xff0c;WXSS 扩展的特性有&#xff1a; 响应式⻓度单位 rpx样式导⼊ 尺⼨单位 rpx &#xff08;…...

LLM之RAG实战(二十一)| 使用LlamaIndex的Text2SQL和RAG的功能分析产品评论

亚马逊和沃尔玛等电子商务平台上每天都有大量的产品评论&#xff0c;这些评论是反映消费者对产品情绪的关键接触点。但是&#xff0c;企业如何从庞大的数据库获得有意义的见解&#xff1f; 我们可以使用LlamaIndex将SQL与RAG&#xff08;Retrieval Augmented Generation&#x…...

Scikit-learn (sklearn)速通 -【莫凡Python学习笔记】

视频教程链接&#xff1a;【莫烦Python】Scikit-learn (sklearn) 优雅地学会机器学习 视频教程代码 scikit-learn官网 莫烦官网学习链接 本人matplotlib、numpy、pandas笔记 1 为什么学习 Scikit learn 也简称 sklearn, 是机器学习领域当中最知名的 python 模块之一. Sk…...

支持向量机(SVM)详解

支持向量机&#xff08;support vector machines&#xff0c;SVM&#xff09;是一种二分类模型。它的基本模型是定义在特征空间上的间隔最大的线性分类器&#xff0c;间隔最大使它有别于感知机。 1、线性可分支持向量机与硬间隔最大化 1.1、线性可分支持向量机 考虑一个二分…...

huggingface学习|云服务器部署Grounded-Segment-Anything:bug总会一个一个一个一个又一个的解决的

文章目录 一、环境部署&#xff08;一&#xff09;模型下载&#xff08;二&#xff09;环境配置&#xff08;三&#xff09;库的安装 二、运行&#xff08;一&#xff09; 运行grounding_dino_demo.py文件&#xff08;二&#xff09;运行grounded_sam_demo.py文件&#xff08;三…...

【最佳实践】Go 组合模式对业务解耦

在 Go 语言中&#xff0c;组合模式&#xff08;Composition&#xff09;是通过嵌入结构体&#xff08;embedding structs&#xff09;来实现的。它允许我们构建复杂的对象&#xff0c;通过将简单对象组合成树形结构来表示整个部分的层次结构。在 Go 中&#xff0c;这种模式不仅…...

arm 汇编调用C

arm64 汇编调用C函数 main.s .section .text .globl main main:stp x29, x30, [sp, -16]! //store fp x29 lr x30mov x0, #0mov x1, #1bl addmov x1, x0 // x0 return ldp x29, x30, [sp], 16 //restore fp lrretadd.c #include <stdio.h> int add(int a, int…...

Vue3+Vite使用Puppeteer进行SEO优化(SSR+Meta)

1. 背景 【笑小枫】https://www.xiaoxiaofeng.com上线啦 资源持续整合中&#xff0c;程序员必备网站&#xff0c;快点前往围观吧~ 我的个人博客【笑小枫】又一次版本大升级&#xff0c;虽然知道没有多少访问量&#xff0c;但我还是整天没事瞎折腾。因为一些功能在Halo上不太好实…...

uni-app学习与快速上手

文章目录 一、uni-app二、学习与快速上手三、案例四、常见问题五、热门文章 一、uni-app uni-app是一种基于Vue.js开发框架的跨平台应用开发框架&#xff0c;可以用于同时开发iOS、Android、H5和小程序等多个平台的应用。uni-app的设计理念是一套代码可以编译到多个平台运行&a…...

orchestrator介绍3.4 web API 的使用

目录 使用 web API API使用简单举例 查看所有的API 实例 JSON 详解 API使用举例 使用 web API orchestrator提供精心设计的 Web API。 敏锐的 Web 开发人员会注意到&#xff08;通过Firebug or Developer Tools&#xff09;Web 界面如何完全依赖于 JSON API 请求。 开发人员可…...

市场复盘总结 20240122

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 昨日主题投资 连板进级率 6/39 15.3% 二进三&#xff1a; 进级率低 0% 最常用的二种方法&#xff1a; 方法…...

TCP 三次握手 四次挥手以及滑动窗口

TCP 三次握手 简介&#xff1a; TCP 是一种面向连接的单播协议&#xff0c;在发送数据前&#xff0c;通信双方必须在彼此间建立一条连接。所谓的 “ 连接” &#xff0c;其实是客户端和服务器的内存里保存的一份关于对方的信息&#xff0c;如 IP 地址、端口号等。 TCP 可以…...

yum指令——Linux的软件包管理器

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;数据结构|Linux|C语言 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 什么是软件包yum指令1.yum 是什么&#xff1f;2.Linux系统&#xff08;Centos&#xff09;的生态 3.yum的相关操作安装卸载yum的相关操作小结 软件源安…...