如何实现嵌套滚动技术

嵌套滚动技术

HarmonyOS
2024-05-26 16:13:06
浏览
收藏 0
回答 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%') 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 21:39:33
相关问题
页面和列表嵌套滚动实现列表吸顶
534浏览 • 1回复 待解决
基于webView的嵌套滚动
171浏览 • 1回复 待解决
Grid嵌套滚动问题有知道的吗?
1492浏览 • 1回复 待解决
使用List嵌套实现表格布局
479浏览 • 1回复 待解决
是否可以实现滚动锚定的效果
449浏览 • 1回复 待解决
数组嵌套数组场景的懒加载实现
276浏览 • 1回复 待解决
如何获取List组件滚动滚动的距离
1048浏览 • 1回复 待解决
过长文字如何滚动显示
829浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
540浏览 • 1回复 待解决
如何理解鸿蒙的分布式软总线技术
6641浏览 • 1回复 待解决