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

技术栈

Appgallery connect

开发准备

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

代码实现创建 banner 表{"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 的页面

import { HomeBanner } from "../entity/HomeBanner"import showToast from "../utils/ToastUtils"

@Component@Previewexport 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.action=='toast') {showToast("1111")}if (item.action=='dialog') {

                }              })          })        }        .borderRadius(10)        .loop(true)        .indicator(true)        .height(130)        .onChange((index: number) => {          this.swpIndex=index+1        })}.padding(10).margin({top:10})

}

}我们先判断是否需要 is_login，然后根据 action 去判断，到这里我们就实现了 banner 的内容