今天整理一下一个常用但临时想起不来的场景,那就是嵌套滚动,有一个场景,大家一定见过:

我们使用Scroll 嵌套一个List,实现先用Scroll滚动,滚动到底部之后在让List滚动,一实战发现滚动不起来,实际上一个地方大家会忽略,就是当Scroll的高度大于屏幕时,才会发生滚动。那么应该这么写:

        Scroll(this.scroller) {
               Column() {
              
                 List(){
                        ......
                 }
                  .layoutWeight(1)
                    .nestedScroll({
                          scrollForward: NestedScrollMode.PARENT_FIRST, 
                          scrollBackward: NestedScrollMode.SELF_FIRST 
                    })
                }
                .height(`calc(${100}vp + 100%)`)
          }
          .id('videoLinkageListScroll')
          .layoutWeight(Constants.LAYOUT_WEIGHT)
          .scrollBar(BarState.Off)
          // 去除回弹效果,避免回弹时重复触发onReachEnd
          .edgeEffect(EdgeEffect.None)

其中两个重要的设置:

第一个是给List设置的嵌套滚动方式:

.nestedScroll({
       scrollForward: NestedScrollMode.PARENT_FIRST, 
       scrollBackward: NestedScrollMode.SELF_FIRST 
 })

第二个是给Scroll 的子布局设置的高度:

.height(`calc(${100}vp + 100%)`)

代表子布局的高是屏幕的100% + 100vp,那么Scroll 会先滚动100vp,然后List开始滚动

具体的业务还需要大家调整相应的参数,我只举个例子

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐