HarmonyOS Refresh组件嵌套滑动冲突问题

Refresh组件与Scroll/List组件进行组合嵌套使用时存在滑动冲突的问题

· 单纯使用Scroll + List嵌套时, 存在滑动冲突可直接定义nestedScroll并固定List高度解决

· 当在中间嵌套Refresh后, 如果List填充满Refresh组件时不存在滑动冲突,如果list不填充满则会引起滑动冲突

· 出现冲突时无法通过简单动态拦截Refresh的hitTextBehavior顺畅解决

HarmonyOS
2024-08-10 12:29:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

list组件在小于一屏的时候是会让手势失效,需加上.edgeEffect(EdgeEffect.None, { alwaysEnabled: true })可以参考以下示例:

@Entry 
@Component 
struct scroll { 
  @State fakeDataSource: string[] = [ 
    'start', 
    'aaa', 'bbb', 'ccc', 'ddd', 'eee', 
    'aaa11', 'bbb', 'ccc', 'ddd', 'eee11', 
    'aaa22', 'bbb', 'ccc', 'ddd', 'eee22', 
    'aaa33', 'bbb', 'ccc', 'ddd', 'eee33', 
    'aaa44', 'bbb', 'ccc', 'ddd', 'eee44', 
    'end' 
  ] 
  @State refreshing: boolean = false 
  refresh() { 
    setTimeout(() => { 
      this.fakeUpdateData() 
      this.refreshing = false 
    }, 1000) 
  } 
 
  private flag = false 
  fakeUpdateData() { 
    if (this.flag) { 
      this.fakeDataSource = [ 
        'start', 
        'aaa', 'bbb', 'ccc', 'ddd', 'eee', 
        'aaa11', 'bbb', 'ccc', 'ddd', 'eee11', 
        'aaa22', 'bbb', 'ccc', 'ddd', 'eee22', 
        'aaa33', 'bbb', 'ccc', 'ddd', 'eee33', 
        'aaa44', 'bbb', 'ccc', 'ddd', 'eee44', 
        'end' 
      ] 
    } else { 
      this.fakeDataSource = [ 
        'start', 
        'aaa', 'bbb', 'ccc', 'ddd', 'eee', 
        'end' 
      ] 
    } 
    this.flag = !this.flag 
  } 
 
  build() { 
    Column() { 
      Scroll() { 
        Column() { 
          Blank() 
            .width('100%') 
            .height(150).backgroundColor(0x33ff0000) 
          Refresh({ refreshing: $$this.refreshing }) { 
            List() { 
              ForEach(this.fakeDataSource, (value: string) => { 
                ListItem() { 
                  Text(value) 
                    .width('100%') 
                    .height(50) 
                    .backgroundColor(Color.White) 
                } 
              }) 
            } 
            .scrollBar(BarState.Off) 
            .nestedScroll({ 
              scrollForward: NestedScrollMode.PARENT_FIRST, 
              scrollBackward: NestedScrollMode.SELF_FIRST 
            }) 
            // list组件在小于一屏的时候是会让手势失效,需加上底下这一行代码 
            .edgeEffect(EdgeEffect.None, { alwaysEnabled: true }) 
            .divider({ strokeWidth: 1 }) 
            .height(790) 
          } 
          .backgroundColor(0x110000ff) 
          .onRefreshing(() => { 
            this.refresh() 
          }) 
        } 
      } 
      .layoutWeight(1) 
      .scrollBar(BarState.Off) 
      .backgroundColor(0x11000000) 
    } 
 
  } 
}
分享
微博
QQ
微信
回复
2024-08-10 18:07:27
相关问题
Tabs组件嵌套滑动组件
976浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
109浏览 • 1回复 待解决
Web和List嵌套手势冲突问题
646浏览 • 1回复 待解决
HarmonyOS 组件嵌套问题
132浏览 • 1回复 待解决
HarmonyOS Tabs组件嵌套Tabs组件问题
207浏览 • 1回复 待解决
HarmonyOS 嵌套滑动NestedScroll 指定offset
137浏览 • 1回复 待解决
Scroll与WaterFlow滑动嵌套
637浏览 • 1回复 待解决
scroll和list的嵌套滑动
865浏览 • 1回复 待解决
HarmonyOS使用Refresh下拉刷新问题
233浏览 • 1回复 待解决
Scroll内Flex加宽高与滑动冲突
1783浏览 • 1回复 待解决
HarmonyOS Scroll 嵌套 RelativeContainer 问题
139浏览 • 1回复 待解决
HarmonyOS list滑动问题
286浏览 • 1回复 待解决