当前位置：首页 > wzjs >正文

合肥大型网站百度官网链接

wzjs 2025/8/22 7:30:37

合肥大型网站,百度官网链接,北京通州网站建设,wordpress调用css样式技术栈 Appgallery connect 开发准备上一节我们创建了积分相关的商品表，我们现在可以针对积分进行更多的操作了，我们首先添加了对应的数据到我们的云数据库中，这一节我们就要把我们存储的数据查询出来展示给用户功能分析首先我们需要…

技术栈

Appgallery connect

开发准备

上一节我们创建了积分相关的商品表，我们现在可以针对积分进行更多的操作了，我们首先添加了对应的数据到我们的云数据库中，这一节我们就要把我们存储的数据查询出来展示给用户

功能分析

首先我们需要在进入页面后进行数据查询，数据查出后我们定义对应的集合，然后我们新建一个瀑布流组件，把数据传递进去，进行数据的展示，在引用组件的地方我们传递数据

代码实现

我们首先在进入页面后查询数据

@State listProduct:PointsProduct[]=[]async aboutToAppear(): Promise<void> {let databaseZone = cloudDatabase.zone('default');let condition = new cloudDatabase.DatabaseQuery(points_product);let listData = await databaseZone.query(condition);let json = JSON.stringify(listData)let data: PointsProduct[] = JSON.parse(json)this.listProduct = datahilog.error(0x0000, 'testTag', `Failed to query data, code: ${data}`);}

然后我们新建一个自定义组件,先定义好一条数据的样式

  @BuilderItem(item:PointsProduct){Column() {Image(item.url).width('100%').aspectRatio(1).objectFit(ImageFit.Cover).borderRadius({topLeft:10,topRight:10})Column() {Text(item.name).fontSize(16).fontColor('#333').margin({ bottom: 4 })Text(item.text_message).fontSize(12).fontColor('#666').margin({ bottom: 8 })Row() {Text(){Span("$").fontColor(Color.Red).fontSize(14)Span(String(item.points)).fontSize(16).fontColor(Color.Red)}Blank()Column() {Image($r('app.media.cart')).width(20).height(20)}.justifyContent(FlexAlign.Center).width(36).height(36).backgroundColor("#ff2bd2fa").borderRadius(18)}.margin({top:10}).width('100%').justifyContent(FlexAlign.SpaceBetween)}.alignItems(HorizontalAlign.Start).padding(12)}.backgroundColor(Color.White).borderRadius(12).onClick(() => {})}

然后我们创建对应的布局，引入item

build() {WaterFlow() {ForEach(this.goodsList, (item:PointsProduct, index) => {FlowItem() {this.Item(item)}.margin({ bottom: 12 })})}.padding(10).columnsTemplate('1fr 1fr').columnsGap(12).onAreaChange((oldVal, newVal) => {this.columns = newVal.width > 600 ? 2 : 1})}

实现之后我们引入组件

  @State listProduct:PointsProduct[]=[]build() {Column() {CommonTopBar({ title: "积分兑换", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})ProductItem({goodsList:this.listProduct})}.backgroundColor(Color.White).height('100%').width('100%')}