使用ArkUI进行开发时，如何设计并实现一个自定义的滑动导航菜单？

Question

使用ArkUI进行开发时，如何设计并实现一个自定义的滑动导航菜单？

Answer 1

公豹你好，给你分享一个demo示例：

@Entry
@Component
struct CustomNavigationMenu {
  @State selectedIndex: number = 0;

  build() {
    Column() {
      // 菜单部分
      Column() {
        ForEach([
          { label: 'Menu 1' },
          { label: 'Menu 2' },
          { label: 'Menu 3' }
        ], item => {
          Button(item.label)
           .onClick(() => {
              this.selectedIndex = item.index;
            })
           .backgroundColor(this.selectedIndex === item.index? '#4CAF50' : '#f0f0f0')
           .textColor(this.selectedIndex === item.index? '#ffffff' : '#000000')
        })
      }

      // 内容部分
      Swiper({ index: this.selectedIndex }) {
        ForEach([
          Column() { Text('Content 1') },
          Column() { Text('Content 2') },
          Column() { Text('Content 3') }
        ], item => {
          item
        })
      }
    }
  }
}