HarmonyOS Scroll包裹Tabs无法整个跟着联动

代码如下：

build() {
  Column() {
    this.topHeaderView()
    Scroll() {
      Column() {
        Tabs({ index: this.currentIndex, controller: this.controller }) {
          TabContent() {
            List({space:10}) {
              ForEach(this.mTestList, (s: string) => {
                ListItem() {
                  Column() {
                    Text("其实")
                    Text(s)
                    Text("结束")
                  }.width("100%")
                  .height(60)
                  .backgroundColor($r('app.color.c_white'))
                  .borderWidth(1)
                  .borderColor($r('app.color.c_ffff5f0f'))
                }
              })
            }.listDirection(Axis.Vertical).enableScrollInteraction(false)
          }
          .tabBar(this.TabBuilder("球场预定", 0))

          TabContent() {
            List() {
              ForEach(this.mTestList, (s: string) => {
                ListItem() {
                  Column() {
                    Text("其实")
                    Text(s)
                    Text("结束")
                  }
                }
              })
            }
          }
          .tabBar(this.TabBuilder("球场介绍", 1))
        }
        .barHeight(44)
        .borderRadius({
          topLeft: 5,
          topRight: 5,
          bottomLeft: 5,
          bottomRight: 5
        })
        .backgroundColor($r('app.color.c_white'))
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          this.currentIndex = index
        })
        .margin({ left: 12, right: 12, top: 7 })
        .vertical(false)
        .barPosition(BarPosition.Start)
        // .scrollable(true)
      }
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.

HarmonyOS

Excelsior_abit

2024-12-25 12:18:49

501浏览

回答 1

按赞同

按时间

superinsect

示例参考如下：

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller();
  mainController: web_webview.WebviewController = new web_webview.WebviewController();
  subController: web_webview.WebviewController = new web_webview.WebviewController();
  tabController: TabsController = new TabsController()

  build() {
    Flex({direction: FlexDirection.Column}) {
      Scroll(this.scroller) {
        Column(){
          Web({
            src: 'www.huawei.com',
            controller: this.mainController
          })
             .height(400)
             .width('100%')
          Column(){
            Text('TAB')
              .backgroundColor(Color.Brown)
              .height(40)
              .width('100%')
            Tabs({barPosition:BarPosition.Start, controller:this.tabController }) {
              TabContent() {
                Web({
                  src: 'https://xxx',
                  controller: this.subController
                })
                  .nestedScroll({
                    scrollForward: NestedScrollMode.PARENT_FIRST,
                    scrollBackward: NestedScrollMode.SELF_FIRST
                  })
                  .height('100%')
              }.tabBar('公告1')
              TabContent(){
                Web({
                  src: 'https://xxx',
                  controller: this.subController
                })
                  .nestedScroll({
                    scrollForward: NestedScrollMode.PARENT_FIRST,
                    scrollBackward: NestedScrollMode.SELF_FIRST
                  })
                  .height('100%')
              }.tabBar('公告2')
            }
            .vertical(false)
            .scrollable(true)
            .barMode(BarMode.Scrollable)
            .barHeight(40)
            .height('100%')
          }
          .height('100%')
        }
      }
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

2024-12-25 14:43:15

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Scroll包裹Tabs无法整个跟着联动

订阅鸿蒙技术特刊，精选内容抢先看