HarmonyOS 鸿蒙Next tabs切换页签与list滚动互斥

HarmonyOS 鸿蒙Next tabs切换页签与list滚动互斥

tabs下面展示文本信息与按钮，其中按钮是用list完成的，当按钮多的情况下是可以滚动按钮，目前问题是左右滑动切换页签时，按住文本区域是可以左右切换的，按住按钮区域切换tab就不行，怀疑是list滚动与tab页签切换互斥了，咨询下怎么解决 按钮区域是用list实现的，会有滚动效果，按住按钮区域无法实现页签切换

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @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 })
      Divider().strokeWidth(2).color('#007DFF').opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          OrderList({ type: '1' })
        }.tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          OrderList({ type: '2' })
        }.tabBar(this.tabBuilder(1, 'blue'))

        TabContent() {
          OrderList({ type: '3' })
        }.tabBar(this.tabBuilder(2, 'yellow'))

        TabContent() {
          OrderList({ type: '4' })
        }.tabBar(this.tabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

@Component
struct OrderList {
  @Prop type: string

  build() {
    Column() {
      Column({ space: 30 }) {
        Row() {
          Text('文本' + this.type)
        }

        Row() {
          Text('文本' + this.type)
        }

        Row() {
          Text('文本' + this.type)
        }
      }.width('100%').height(150)

      List() {
        ListItem() {
          Row() {
            Text('取消订单' + this.type).fontSize(13).fontColor('#222427')
          }
          .padding({
            left: 12,
            right: 12,
            top: 5,
            bottom: 5
          })
          .border({
            width: 1,
            radius: 4,
            color: '#C9CED3',
            style: BorderStyle.Solid
          })
        }

        ListItem() {
          Row() {
            Text('查看发票' + this.type).fontSize(13).fontColor('#222427')
          }
          .padding({
            left: 12,
            right: 12,
            top: 5,
            bottom: 5
          })
          .border({
            width: 1,
            radius: 4,
            color: '#C9CED3',
            style: BorderStyle.Solid
          })
        }

        ListItem() {
          Row() {
            Text('申请发票' + this.type).fontSize(13).fontColor('#222427')
          }
          .padding({
            left: 12,
            right: 12,
            top: 5,
            bottom: 5
          })
          .border({
            width: 1,
            radius: 4,
            color: '#C9CED3',
            style: BorderStyle.Solid
          })
        }

        ListItem() {
          Row() {
            Text('退换货' + this.type).fontSize(13).fontColor('#222427')
          }
          .padding({
            left: 12,
            right: 12,
            top: 5,
            bottom: 5
          })
          .border({
            width: 1,
            radius: 4,
            color: '#C9CED3',
            style: BorderStyle.Solid
          })
        }

        ListItem() {
          Row() {
            Text('去支付' + this.type).fontSize(13).fontColor('#222427')
          }
          .padding({
            left: 12,
            right: 12,
            top: 5,
            bottom: 5
          })
          .border({
            width: 1,
            radius: 4,
            color: '#C9CED3',
            style: BorderStyle.Solid
          })
        }
      }.listDirection(Axis.Horizontal).scrollBar(BarState.Off).edgeEffect(EdgeEffect.None).width('100%')
    }.width('100%')
  }
}