《仿盒马》app开发技术分享-- 首页banner(6)

举报
yd_215151764 发表于 2025/06/30 10:18:37 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一篇文章中我们实现了项目端云一体化首页商品活动入口列表,现在我们还差一个banner的模块,banner模块不仅可以用于展示一些信息,还可以在点击之后进行,跳转,弹窗,升级提示,信息提示等作用,我们直接坐的完善一些,因为我们事先在banner表中添加了action,我们通过这个action的值来进行对应的处理,同时通过islog...


## 技术栈

Appgallery connect
## 开发准备

上一篇文章中我们实现了项目端云一体化首页商品活动入口列表,现在我们还差一个banner的模块,banner模块不仅可以用于展示一些信息,还可以在点击之后进行,跳转,弹窗,升级提示,信息提示等作用,我们直接坐的完善一些,因为我们事先在banner表中添加了action,我们通过这个action的值来进行对应的处理,同时通过islogin字段来判断是否需要登陆操作

## 功能分析
要实现banner功能,我们可以直接选择使用系统的Swiper组件,通过使用swiper自带的切换和点击事件进行业务逻辑的控制,同时因为我们缺少表格的创建所以我们还要进行表格的创建,输入的插入,创建对应的实体类和db类,在点击事件中我们还要通过action来判断点击事件的处理,现在我们有toast 和 dialog两个type,所以我们需要获取值之后进行业务处理

**代码实现**
创建banner表,在表中我们添加对应的字段,首先是我们的表id,然后我们添加对应的bannerid,加上链接,以及页面的routerstr,最后添加我们需要判断点击事件的字段action
{
  "objectTypeName": "home_banner",
  "fields": [
    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
    {"fieldName": "banner_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
    {"fieldName": "url", "fieldType": "String"},
    {"fieldName": "is_login", "fieldType": "Boolean"},
    {"fieldName": "router", "fieldType": "Boolean"},
    {"fieldName": "action_id", "fieldType": "Integer"},
    {"fieldName": "action", "fieldType": "String"}
  ],
  "indexes": [
    {"indexName": "banner_id", "indexList": [{"fieldName":"banner_id","sortType":"ASC"}]}
  ],
  "permissions": [
    {"role": "World", "rights": ["Read"]},
    {"role": "Authenticated", "rights": ["Read", "Upsert"]},
    {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
  ]
}
填充数据

banner 
{
  "cloudDBZoneName": "default",
  "objectTypeName": "home_banner",
  "objects": [
    {
      "id": 10,
      "banner_id": 1,
      "url": "在线图片",
      "is_login": true,
      "router": "",
      "action_id": 10,
      "action": "toast"
    },
    {
      "id": 20,
      "banner_id": 0,
      "url": "在线图片",
      "is_login": false,
      "router": "",
      "action_id": 20,
      "action": "dialog"
    }
  ]
}

由于我们缺少banner相关的内容,所以我们还需要创建一个banner的页面,在页面中我们创建对应的tabs组件,在组件中我们从数据库中查询出对应的数据,然后通过foreach把数据循环展示出来。

import { HomeBanner } from "../entity/HomeBanner"
import showToast from "../utils/ToastUtils"
import { promptAction } from "@kit.ArkUI"

@Component
@Preview
export struct HomeBannerPage {
  //数据源
  @Link bannerList:HomeBanner[]
  //tabs 当前数据源的下标
  @State swpIndex:number=1

  build() {
    Column() {
            Swiper(){
              ForEach(this.bannerList, (item: HomeBanner) => {
                Image(item.url)
                  .width('100%')
                  .height(130)
                  .borderRadius(10)
                  .onClick(()=>{
                    if (item.is_login){
                      if (item.action=='toast') {
                        showToast(item.router)
                      }
                      if (item.action=='dialog') {
                        promptAction.showDialog({
                          title: '提示',
                          message: item.router,
                          buttons: [
                            {
                              text: '确认',
                              color: '#ffffff'
                            },
                            {
                              text: '关闭',
                              color: '#ffffff'
                            }
                          ],
                        })
                          .then(data => {
                            console.info('showDialog success, click button: ' + data.index);
                          })
                          .catch((err: Error) => {
                            console.info('showDialog error: ' + err);
                          })
                      }
                    }
                  })
              })
            }
            .borderRadius(10)
            .loop(true)
            .indicator(true)
            .height(130)
            .onChange((index: number) => {
              this.swpIndex=index+1
            })
    }
    .padding(10)
    .margin({top:10})
  }
}
我们先判断是否需要is_login,然后根据action去判断,到这里我们就实现了banner的内容


【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。