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

}

}

}

文章来源

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: