## 技术栈

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的内容