#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果原创

凌晨2点

发布于 2024-8-4 13:47

浏览

0收藏

打开买菜软件正准备抢购一批高（打）端（折）菜品，忽然发现叮咚买菜商品banner竟然更新了！

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

身为对前沿技术有追求的程序员，立马打算复刻一下

首先介绍什么是banner

商品详情 banner（横幅广告）是指在电子商务网站或应用的商品详情页面上展示的横幅广告。这种类型的横幅通常用于展示商品的详细信息、促销活动、特色功能或者其他相关信息。商品详情 banner 的目的是为了吸引顾客的注意力，促进商品的销售。

商品详情 banner 的特点

视觉吸引力：通常使用高质量的图片和吸引人的设计来吸引顾客的注意。

信息传递：可以包含商品的主要卖点、优惠信息、促销活动等关键信息。

互动性：有时会加入互动元素，如滑动查看多张图片、点击放大查看细节等。

链接到购买：通常会有一个明显的按钮或链接，引导顾客进行购买操作。

商品详情 banner 的用途

展示商品特征：通过图片和文字突出商品的独特卖点。

促销活动：宣传限时折扣、赠品、捆绑销售等促销活动。

引导购物：通过明确的 CTA（Call To Action，行动号召）按钮，如“立即购买”、“加入购物车”，鼓励顾客下单。

品牌宣传：加强品牌的视觉识别，提高品牌认知度。

我们要实现的效果

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

传统banner效果

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

可以看到我们banner底部中间有页签和评价两个模块当我们的页签到达最大值，再继续进行切换，我们就需要切换到评价模块

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

那么要在鸿蒙中实现这种效果我们要使用哪些技术呢？

1. 首先就是模块的切换，我们可以使用tabs ，左侧模块我们使用swiper，右侧模块简单的自定义布局

2. 对tabs的页签进行处理，展示我们banner的下标，当达到最大数时，swiper的切换带动tabs的切换事件

Tabs结构如下

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

模块的切换

实现效果如下

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

首先我们定义了tabs并且修改页签中的数据（代码如下）

@Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })

    }.width('30%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.tabBuilder(0, this.currentIndex+"/"+this.txtList.length))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
评价'))

      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)

      .barPosition(BarPosition.End)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }
  }

这时候我们的swiper 就初具雏形了

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

但是我们想要的效果里并没有中间的圆点指示器

所以我们需要在第一个页签的tabContent中加入swiper 并且屏蔽掉小圆点。

敲黑板！！！！
通过 indicator(false)来屏蔽
添加过属性后我们的swiper效果如下

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

可以看到圆点指示器已经消失了

然后我们开始对tabs 的页签进行嵌入

Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column(){
            Swiper(){
              ForEach(this.txtList, (item: string) => {
                Text(item.toString())
                  .width('100%')
                  .height(160)
                  .backgroundColor(0xAFEEEE)
                  .textAlign(TextAlign.Center)
                  .fontSize(30)
                  .borderRadius(10)
              })
            }
            .loop(false)
            .indicator(false)
            .height('100%')
            .onChange((index: number) => {
                this.swpIndex=index+1
            })


          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(0, this.swpIndex+"/"+this.txtList.length))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.tabBuilder(1, '评价'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .barPosition(BarPosition.End)

我们通过嵌入swiper 和一个空页面在ui显示上已经得到如下页面

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区

现在已经非常接近了

现在我们只需要处理好当swiper滑动到最大值的时候，tabs的切换逻辑就可以实现我们想要的效果，这时候我们需要在swiper上使用onTouch 方法，来监听触摸事件（代码如下）

onTouch((event?: TouchEvent) => {
if(event){
if (event.type === TouchType.Down) {
this.eventType = 'Down'
this.movePos=event.touches[0].x
}
if (event.type === TouchType.Up) {
this.eventType = 'Up'
this.moveLeft=event.touches[0].x
if(this.swpIndex==this.txtList.length){
if (this.movePos-this.moveLeft>120) {
this.controller.changeIndex(1)
}
}
}
if (event.type === TouchType.Move) {
this.eventType = 'Move'
}
}
})

分别对按下（down）、抬起（up）、滑动（move）这三种状态进行监听，然后通过controller.changeIndex(tabs下标) 方法来控制tabs的切换，就是先我们想要的效果啦。

最终实现效果如下

#HarmonyOS NEXT体验官#仿叮咚买菜Banner切换效果-鸿蒙开发者社区