当Scroll里嵌套了List后,List的滑动与Scroll的滑动冲突了,如何解决这个冲突?

当Scroll里嵌套了List后,List的滑动与Scroll的滑动冲突了,如何解决这个冲突?

HarmonyOS
4天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
li_jian_jun

使用nestedScroll可以解决滑动冲突的问题

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

NestedScrollMode设置为PARENT_FIRST时,父组件先滚动,滚动至边缘后List滚动。

 NestedScrollMode设置成SELF_FIRST时,List滚动到页面边缘后,父组件继续滚动。

Column({ space: 8 }) {
  Scroll() {
    Column() {
      Text("Header")
        .width("96%")
        .height(150)
        .backgroundColor(Color.Orange)
      List() {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text(item).margin(10)
              .padding(20)
              .width("96%")
              .backgroundColor(Color.Gray)
          }
        })
      }.height("100%")
      .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
    }
  }.layoutWeight(1)
}.width('100%')
.height("100%")
.justifyContent(FlexAlign.Center)

修改前

修改后

分享
微博
QQ
微信
回复
4天前
相关问题
scrolllist嵌套滑动
438浏览 • 1回复 待解决
Scroll内Flex加宽高滑动冲突
702浏览 • 1回复 待解决
ScrollWaterFlow滑动嵌套
431浏览 • 1回复 待解决
Web和List嵌套手势冲突问题
430浏览 • 1回复 待解决
如何屏蔽List滑动事件
888浏览 • 1回复 待解决
如何监听List组件滑动距离
681浏览 • 1回复 待解决
Tabs组件嵌套滑动组件
621浏览 • 1回复 待解决
嵌套组件中Scroll不生效
795浏览 • 1回复 待解决