import { AxiosResponse } from "@ohos/axios"
|
import { NewsBase, NewsBaseData } from "../../data/NewsBase"
|
import { TextBase } from "../../data/TextBase"
|
import { NewsApi, TextApi } from "../../http/AxiosAPI"
|
|
@Entry
|
@Component
|
export struct SearchPage {
|
//变量承载新闻数据
|
@State newsBase: NewsBase = new NewsBase()
|
@State TextData: TextBase = new TextBase()
|
async aboutToAppear() {
|
let newsData:NewsBase = await NewsApi()
|
this.newsBase = newsData
|
let textData:TextBase = await TextApi()
|
this.TextData = textData
|
console.info('textData ' + JSON.stringify(textData))
|
}
|
build() {
|
Column() {
|
Column(){
|
Text(JSON.stringify(this.TextData.text))
|
.fontWeight(700)
|
.fontSize(20)
|
|
}
|
.width('95%')
|
.height(50)
|
.borderRadius(20)
|
.backgroundColor(Color.White)
|
.justifyContent(FlexAlign.Center)
|
.onClick(() => {
|
console.info('TextData: ' + JSON.stringify(this.TextData.text))
|
})
|
List({space:15}){
|
ForEach(this.newsBase.data,(item:NewsBaseData) =>{
|
ListItem(){
|
newsItem({newsData: item})
|
}
|
})
|
}
|
.alignListItem(ListItemAlign.Center)
|
}
|
.height('100%')
|
.width('100%')
|
.backgroundColor("#ffececec")
|
}
|
}
|
//条目样式，自定义组件
|
@Component
|
struct newsItem {
|
@Prop newsData: NewsBaseData
|
build() {
|
Row({space: 10}){
|
Image(this.newsData.pic)
|
//占位图
|
.alt($r('app.media.app_logo_image'))
|
.width(100)
|
.height(70)
|
.objectFit(ImageFit.Fill)
|
Column({space: 10}){
|
Text(this.newsData.title).SearchTextSty(18,700)
|
Text(this.newsData.desc).SearchTextSty(15,400,Color.Black,2)
|
Text(`热度： ${this.newsData.hot}`).SearchTextSty(10,400,Color.Red)
|
.textAlign(TextAlign.End)
|
}
|
.width('65%')
|
}
|
.width('95%')
|
.padding(10)
|
.borderRadius(10)
|
.backgroundColor(Color.White)
|
}
|
}
|
@Extend(Text) function SearchTextSty(mSize:number,mWeight?:FontWeight,mColor?: ResourceColor,mLines?: number){
|
.fontSize(mSize)
|
.fontWeight(mWeight? mWeight : 400)
|
.fontColor(mColor? mColor : Color.Black)
|
.maxLines(mLines? mLines : 1)
|
.textOverflow({overflow: TextOverflow.Ellipsis})
|
.width('100%')
|
}
|
