鸿蒙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%')
}
@Builder
NavigationTitle() {
Column() {
Text('首页')
.width('100%')
.textAlign(TextAlign.Center)
.height('28vp')
.fontSize('20fp')
.fontWeight(500)
.fontColor('#fff')
}
}
}
文章来源
您阅读本篇文章共花了： 大家都在找：
HarmonyOS：harmonyos官网下载
华为：华为pura70
发表评论