HarmonyOS List+Grid等嵌套情况时,如何禁止掉Grid的滑动,或者不影响List的滑动

HarmonyOS
17h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可以给Grid添加一个可滚动容器组件的控制器:scroller: Scroller = new Scroller(),Grid(this.scroller),然后给grid添加nestedScroll属性。参考代码如下:

@Entry
@Component
struct Page3 {
  arr: number[] =
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 90, 0, 1, 231, 3, 13, 1, 423, 4, 234, 324, 53, 45, 234, 2, 345, 235, 34, 53, 45, 346]
  scroller: Scroller = new Scroller()
  build() {
    Column() {
      Text('根节点')
      Stack({ alignContent: Alignment.BottomStart }) {
        Column() {
          Flex() {
            List() {
              ForEach(this.arr, (item: number) => {
                if (item !== 231) {
                  ListItem() {
                    Text(item.toString())
                  }
                  .height(20)
                } else {
                  ListItem() {
                    Column() {
                      Grid(this.scroller) {
                        ForEach(this.arr, (item2: number) => {
                          GridItem() {
                            Text(item2.toString())
                          }
                          .height(30)
                          .backgroundColor(Color.Grey)
                        })
                      }
                      .nestedScroll({
                        scrollForward: NestedScrollMode.SELF_FIRST,
                        scrollBackward: NestedScrollMode.SELF_FIRST
                      })
                      .width('100%')
                      .columnsGap(10)
                      .rowsGap(10)
                      .columnsTemplate('1fr 1fr 1fr 1fr')
                      .height(200)
                      Text('column')
                    }

                  }
                }
              })
            }
            .constraintSize({maxHeight:600})
            Text('flex')
              .width(60)
          }
        }
        .width('100%')
        .height('80%')
        .backgroundColor(Color.Green)
      }
      .width('100%')
      .height('50%')
      .backgroundColor(Color.Grey)
    }
    .width('100%')
    .height('100%')
  }
}

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#nestedscrolloptions10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

分享
微博
QQ
微信
回复
13h前
相关问题
HarmonyOS 组件List如何禁止滑动
23浏览 • 1回复 待解决
scroll和list嵌套滑动
1546浏览 • 1回复 待解决
HarmonyOS List组件不能嵌套Grid组件吗
81浏览 • 1回复 待解决
HarmonyOS List嵌套waterflow滑动卡顿
301浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
509浏览 • 1回复 待解决
HarmonyOS Grid横向滑动
422浏览 • 1回复 待解决
HarmonyOS scroll嵌套List不能整体滑动
516浏览 • 1回复 待解决
HarmonyOS scroll嵌套list页面无法滑动
40浏览 • 1回复 待解决
HarmonyOS tabs和grid实现滑动
29浏览 • 1回复 待解决