如何实现嵌套滚动技术

嵌套滚动技术

HarmonyOS

克里斯蒂东

2024-05-26 16:13:06

浏览

回答 1

待解决

回答 1

按赞同

按时间

kraml

实现嵌套滚动只要一个属性nestedScroll，即可实现该效果

需要在子列表上加上一个属性即可nestedScroll，该属性必须传入一个包含scrollForward和scrollBackward的对象，用于列表前进和后退行为的控制优先级。

设置前进即往下滑的过程中，父级列表优先，当父列表滚动到自己的底部时，才开始子列表的滚动。
设置后退即往上划的过程中，子级列表优先，当子列表滚动到自己的顶部时，才开始触发父列表的滚动

对应子列表的代码如下：

List() { 
  ForEach([1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12,13,14,15,16], (item) => { 
    ListItem() { 
      Row(){ 
        Text("Item" + item) 
      } 
      .width('100%') 
      .height('10%').backgroundColor("#ccc").margin({ top: 10 }) 
      .padding({left:10,right:10}) 
     } 
   }) 
  } 
  .scrollBar(BarState.Off) 
  .width('100%') 
  .height('90%') 
  .nestedScroll({ 
    scrollForward: NestedScrollMode.PARENT_FIRST, 
    scrollBackward: NestedScrollMode.SELF_FIRST  
  })

该方式支持边缘效果，也就是列表的回弹属性EdgeEffect，示例代码如下：

@Entry 
@Component 
struct Index { 
  
  build() { 
    Row() { 
      Column() { 
        List() { 
          ListItem() { 
            Row().height('30%').width('100%').backgroundColor("#aaddcc") 
          } 
  
          ListItem() { 
           Tabs() { 
             TabContent() { 
               List() { 
                 ForEach([1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12,13,14,15,16], (item) => { 
                   ListItem() { 
                     Row() 
                     { 
                       Text("Item" + item) 
                     } 
                       .width('100%') 
                       .height('10%').backgroundColor("#ccc").margin({ top: 10 }) 
                       .padding({left:10,right:10}) 
                   } 
                 }) 
               } 
               .scrollBar(BarState.Off) 
               .width('100%') 
               .height('90%') 
               .nestedScroll({ 
                 scrollForward: NestedScrollMode.PARENT_FIRST, 
                 scrollBackward: NestedScrollMode.SELF_FIRST }) 
             }.tabBar("收藏") 
  
             TabContent() { 
               List() { 
                 ForEach([1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12,13,14,15,16], (item) => { 
                   ListItem() { 
                     Row(){ 
                       Text("Item" + item) 
                     } 
                       .width('100%') 
                       .height('10%').backgroundColor("#ffef6d6d").margin({ top: 10 }) 
                       .padding({left:10,right:10}) 
                   } 
                 }) 
               } 
               .scrollBar(BarState.Off) 
               .width('100%') 
               .height('90%') 
               .nestedScroll({ 
                 scrollForward: NestedScrollMode.PARENT_FIRST, 
                 scrollBackward: NestedScrollMode.SELF_FIRST }) 
             }.tabBar("浏览") 
           }.height("90%") 
           .backgroundColor("#ddd") 
          } 
        } 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .height('100%') 
  } 
}

2024-05-27 21:39:33

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

发布

51CTO

51CTO博客

51CTO学堂

如何实现嵌套滚动技术

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