HarmonyOS 多tab页面,多tab栏切换的自定义动画

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

可参考如下demo

import {
  ItemRestriction,
  SegmentButton,
  SegmentButtonItemTuple,
  SegmentButtonOptions,
  SegmentButtonTextItem
} from '@ohos.arkui.advanced.SegmentButton'

@Entry
@Component
struct Index {
  // 配置按钮组数组
  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
    buttons: [
      { text: '美妆' },
      { text: '衣服' },
      { text: '鞋子' }
    ] as ItemRestriction<SegmentButtonTextItem>,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { text: '美妆' },
      { text: '衣服' },
      { text: '鞋子' }
    ] as SegmentButtonItemTuple,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  // 配置按钮组默认选中项
  @State tabSelectedIndexes: number[] = [2]
  @State singleSelectCapsuleSelectedIndexes: number[] = [1]
  build() {
    Row() {
      Column() {
        Column({ space: 25 }) {
          SegmentButton({
            options: this.tabOptions,
            selectedIndexes: $tabSelectedIndexes
          })
          SegmentButton({
            options: this.singleSelectCapsuleOptions,
            selectedIndexes: $singleSelectCapsuleSelectedIndexes
          })
        }
        .width('90%')
      }
      .width('100%')
    }
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 如何自定义tab
456浏览 • 2回复 待解决
HarmonyOS 怎么自定义TabTabbar
11浏览 • 1回复 待解决
module场景Hvigor自定义扩展咨询
834浏览 • 1回复 待解决
HarmonyOS 一个自定义tabs冲突
19浏览 • 1回复 待解决
swiper组件如何实现自定义切换动画
775浏览 • 1回复 待解决
Tab控件切换问题有哪些?
267浏览 • 1回复 待解决
HarmonyOS Tabs组件Tab滚动问题
560浏览 • 1回复 待解决
自定义弹窗自定义转场动画
1170浏览 • 1回复 待解决