《仿盒马》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 @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.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的内容