HarmonyOS Tabs组件嵌套滑动

存在两个Tabs，希望A和B两个Tabs有联动效果，当B滑动到最右侧，继续左滑时，A往右滑动。
HarmonyOS
Heiang
2024-10-12 09:26:57
浏览
回答 1
按赞同
按时间
FengTianYa
核心功能参考以下demo：方法是在下面的tabs为最后一个时，增加拖动手势，再向右滑动上面的tabs index++，向前滑动同理，下面的tabs为第一个时，增加拖动手势，再向左滑动上面的tabs index--。
//xxx.index  
import { CommonConstants } from '../common/constants/CommonConstants';  
@Entry  
@Component  
struct NestedCeiling {  
  private listArr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];  
  private listArr1: number[] = [1, 2, 3, 4, 5, 6, 7, 8];  
  private scrollerForScroll: Scroller = new Scroller();  
  private scrollerForList: Scroller = new Scroller();  
  @State currentIndexTop:number = 0;//上层tabs索引  
  @State currentIndexUnder:number = 0;//下层tabs索引  
  @Builder  
  tabBuilder(index: number, name: string) {  
    Column() {  
      Text(name)  
        .fontSize($r('app.float.middle_font_size'))  
        .lineHeight($r('app.float.title_line_height'))  
        .margin({  
          top: $r('app.float.title_margin_top'),  
          bottom: $r('app.float.title_margin_bottom')  
        })  
    }  
  }  
  @Builder  
  listBuilder(listName: string, tabName: string, index: number) {  
    TabContent() {  
      Scroll(){  
        Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Start}){  
          List({ space: CommonConstants.LIST_SPACE, scroller: this.scrollerForList }) {  
            ForEach(this.listArr1, (item: number) => {  
              ListItem() {  
                Text(listName + item)  
                  .width(CommonConstants.FULL_WIDTH)  
                  .height(CommonConstants.FULL_HEIGHT)  
                  .borderRadius($r('app.float.list_item_radius'))  
                  .fontSize($r('app.float.middle_font_size'))  
                  .fontWeight(CommonConstants.FONT_WEIGHT_FIVE)  
                  .padding({ left: $r('app.float.list_item_padding') })  
                  .backgroundColor(Color.White)  
              }  
              .width(CommonConstants.FULL_WIDTH)  
              .height($r('app.float.list_item_height'))  
            }, (item: string) => JSON.stringify(item))  
          }  
          .padding({  
            left: $r('app.float.list_padding'),  
            right: $r('app.float.list_padding')  
          })  
          .width(CommonConstants.FULL_WIDTH)  
          .edgeEffect(EdgeEffect.None)  
          .scrollBar(BarState.Off)  
          .nestedScroll({  
            scrollForward: NestedScrollMode.SELF_FIRST,  
            scrollBackward: NestedScrollMode.SELF_FIRST  
          })  
          //todo 1、设置子tabs，并增加参数判断是否为最后一个TabContent  
          Tabs({index:$$this.currentIndexUnder}) {  
            this.listBuilder2(listName+'b', tabName, index, false)  
            this.listBuilder2(listName+'b', tabName, index, true)  
          }  
        }  
      }  
    }  
    .tabBar(SubTabBarStyle.of(listName+""))  
  }  
  //第四个参数，自主标记是否为最后一个  
  @Builder  
  listBuilder2(listName: string, tabName: string, index: number, boo:boolean){  
    //todo 2、判断为最后一个TabContent时增加拖拽事件  
    if(boo){  
      TabContent() {  
        List({ space: CommonConstants.LIST_SPACE, scroller: this.scrollerForList }) {  
          ForEach(this.listArr, (item: number) => {  
            ListItem() {  
              Text(listName + item)  
                .width(CommonConstants.FULL_WIDTH)  
                .height(CommonConstants.FULL_HEIGHT)  
                .borderRadius($r('app.float.list_item_radius'))  
                .fontSize($r('app.float.middle_font_size'))  
                .fontWeight(CommonConstants.FONT_WEIGHT_FIVE)  
                .padding({ left: $r('app.float.list_item_padding') })  
                .backgroundColor(Color.White)  
            }  
            .width(CommonConstants.FULL_WIDTH)  
            .height($r('app.float.list_item_height'))  
          }, (item: string) => JSON.stringify(item))  
        }  
        .padding({  
          left: $r('app.float.list_padding'),  
          right: $r('app.float.list_padding')  
        })  
        .width(CommonConstants.FULL_WIDTH)  
        .height(CommonConstants.FULL_HEIGHT)  
        .edgeEffect(EdgeEffect.None)  
        .scrollBar(BarState.Off)  
        .nestedScroll({  
          scrollForward: NestedScrollMode.PARENT_FIRST,  
          scrollBackward: NestedScrollMode.SELF_FIRST  
        })  
      }  
      //todo 3、绑定手势动作  
      .gesture(  
        // 绑定拖动手势，向右，移动距离为5vp（默认）时触发  
     PanGesture({direction:PanDirection.Left})  
          .onActionStart(() => {  
            this.currentIndexTop++  
            this.currentIndexUnder=0  
          })  
      )  
      .tabBar(SubTabBarStyle.of(listName+""))  
    }else{  
      TabContent() {  
        List({ space: CommonConstants.LIST_SPACE, scroller: this.scrollerForList }) {  
          ForEach(this.listArr, (item: number) => {  
            ListItem() {  
              Text(listName + item)  
                .width(CommonConstants.FULL_WIDTH)  
                .height(CommonConstants.FULL_HEIGHT)  
                .borderRadius($r('app.float.list_item_radius'))  
                .fontSize($r('app.float.middle_font_size'))  
                .fontWeight(CommonConstants.FONT_WEIGHT_FIVE)  
                .padding({ left: $r('app.float.list_item_padding') })  
                .backgroundColor(Color.White)  
            }  
            .width(CommonConstants.FULL_WIDTH)  
            .height($r('app.float.list_item_height'))  
          }, (item: string) => JSON.stringify(item))  
        }  
        .padding({  
          left: $r('app.float.list_padding'),  
          right: $r('app.float.list_padding')  
        })  
        .width(CommonConstants.FULL_WIDTH)  
        .height(CommonConstants.FULL_HEIGHT)  
        .edgeEffect(EdgeEffect.None)  
        .scrollBar(BarState.Off)  
        .nestedScroll({  
          scrollForward: NestedScrollMode.PARENT_FIRST,  
          scrollBackward: NestedScrollMode.SELF_FIRST  
        })  
      }  
      .tabBar(SubTabBarStyle.of(listName+""))  
    }  
  }  
  build() {  
    Column() {  
      Text($r('app.string.title'))  
        .fontWeight(FontWeight.Bold)  
        .fontSize($r('app.float.big_font_size'))  
        .height($r('app.float.list_item_height'))  
        .textAlign(TextAlign.Start)  
        .width(CommonConstants.FULL_WIDTH)  
        .padding({  
          left: $r('app.float.discover_left_padding'),  
          bottom: $r('app.float.discover_bottom_padding'),  
          top: $r('app.float.discover_top_padding')  
        })  
        .onClick(()=>{  
          this.currentIndexTop++  
        })  
      Scroll(this.scrollerForScroll) {  
        Column() {  
          //外层父tabs  
          Tabs({index:$$this.currentIndexTop}) {  
            this.listBuilder(CommonConstants.LIST_NAME_1, CommonConstants.TAB_NAME_1, 0)  
            this.listBuilder(CommonConstants.LIST_NAME_2, CommonConstants.TAB_NAME_2, 1)  
          }  
          .barWidth($r('app.float.bar_width'))  
        }  
      }  
      .width(CommonConstants.FULL_WIDTH)  
      .height(CommonConstants.STACK_HEIGHT)  
    }  
    .height(CommonConstants.FULL_HEIGHT)  
    .backgroundColor($r('app.color.start_window_background'))  
  }  
}
//float.json  
{  
  "float": [  
    {  
      "name": "middle_font_size",  
      "value": "16fp"  
    },  
    {  
      "name": "title_line_height",  
      "value": "22vp"  
    },  
    {  
      "name": "title_margin_top",  
      "value": "10vp"  
    },  
    {  
      "name": "title_margin_bottom",  
      "value": "5vp"  
    },  
    {  
      "name": "divider_width",  
      "value": "64vp"  
    },  
    {  
      "name": "list_item_radius",  
      "value": "24vp"  
    },  
    {  
      "name": "list_item_padding",  
      "value": "12vp"  
    },  
    {  
      "name": "list_padding",  
      "value": "10vp"  
    },  
    {  
      "name": "list_item_height",  
      "value": "56vp"  
    },  
    {  
      "name": "big_font_size",  
      "value": "30fp"  
    }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.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
2024-10-12 15:40:01
如何写精华回答，获更多曝光？
发布
51CTO

51CTO博客

51CTO学堂

HarmonyOS Tabs组件嵌套滑动

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