不廢話先上圖
image.png
圖片數據來自網絡開源接口
這里只做練習
下面是源碼
type FindModel = {
title:string,
imgurl:string,
yanyuan:string,
pingfen:string,
pingjia:string
}
@Component
export struct CategoryPage {
@State findLise:Array<FindModel> = []
aboutToAppear(){
//網絡請求
findModel.getCategoryList((data)=>{
this.findLise = data.data
this.findLise = [...this.findLise,...data.data]
})
}
build() {
Column(){
Text('grid布局').width('100%').height('50vp').fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)
Grid(){
ForEach(this.findLise,(item)=>{
GridItem(){
Column(){
Image(item.info.imgurl).width('100%').height('180vp')
Row(){
Text(item.title).textOverflow({overflow:TextOverflow.Ellipsis}).width('50%').maxLines(1)
Text(item.info.pingfen)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
Text(item.info.pingjia)
}
.alignItems(HorizontalAlign.Start)
}
})
}
.columnsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(10)
}
.width('100%')
.height('100%')
.padding(10)
}
}
看著還是挺簡單的 只是單獨的分類頁面
這類我采用的是 MVVM 的開發模式 所以會有model的產生
其實有點類似安卓開發
如果是前端小伙伴也可以用前端的思想來寫
