HarmonyOS 鸿蒙Next 第三方下拉刷新组件PulltoRefresh组件嵌套list无法滑动

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 第三方下拉刷新组件PulltoRefresh组件嵌套list无法滑动

首页布局,使用refresh外层嵌套整体布局,使用onScroll进行标题栏下主布局滑动。tabs通过指定高度实现粘性吸顶动作,其中一个tab是一个列表,需要支持上啦刷新。列表使用NestedScroll设定粘性滑动处理。这里使用PullToRefresh进行嵌套list处理,目前的问题是:单独使用list,可以上啦滑动,嵌套pullToRefresh后,列表长度不足时,无法触发滑动,List的OnScroll没有触发。想要了解这里是哪里需要设置?

主页面:

build() {
  Column() {
    Refresh({ refreshing: $$this.refreshing }) {
      Stack() {
        //可滑动区域
        Scroll(this.scrollerForScroll) {
          Column() {
            this.homeTopArea()
            // tab
            Tabs({ barPosition: BarPosition.Start }) {
              TabContent() {
                HotNewsComponent()
              }.tabBar(this.tabContainer(0, '热点', '', ''))
            }
            .onChange((index) => {
              this.pageIndex = index
            })
            .fadingEdge(false)
            .vertical(false)
            .barHeight(45)
            .width('100%')
            .height('87%')
          }
        }
        .width("100%")
        .height("100%")
        .scrollBar(BarState.Off)
        .onScroll((_xOffset: number, _yOffset: number) => {
          this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset;
        })

        // 顶部导航条
        this.homeHeader()
      }
      .alignContent(Alignment.Top)
      .width('100%')
      .height('100%')

    }
    .onStateChange((refreshStatus: RefreshStatus) => {

    }).onRefreshing(async () => {
      await this.onLoadData()
      this.refreshing = false
    })
  }
  .width('100%')
}

tab列表组件
PullToRefresh({
  data: $zxLazyData,
  scroller: this.scroller,
  customList: () => {
    this.getListView()
  },
  refreshConfigurator: this.refreshConfigurator,
  onLoadMore: () => {
    return new Promise(resolve, reject => {

    });
  }
}).onTouch((event) => {
})

@Builder
getListView() {
  List({ scroller: this.scroller }) {
    ListItem() {
      this.getKxUI()
    }

    LazyForEach(this.zxLazyData, (item: AllNewsItemBean, index: number) => {
      ListItem() {

      }
    }, (item: AllNewsItemBean, index: number) => {
    })
  }
  .height("100%")
  .width("100%")
  .edgeEffect(EdgeEffect.None)
  .scrollBar(BarState.Off)
  .nestedScroll({
    scrollForward: NestedScrollMode.PARENT_FIRST,
    scrollBackward: NestedScrollMode.SELF_FIRST
  })
  .onScroll((event, state) => {
  })
}

更多关于HarmonyOS 鸿蒙Next 第三方下拉刷新组件PulltoRefresh组件嵌套list无法滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

@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) } } }

更多关于HarmonyOS 鸿蒙Next 第三方下拉刷新组件PulltoRefresh组件嵌套list无法滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


老哥 厉害厉害,

针对HarmonyOS 鸿蒙Next系统中第三方下拉刷新组件PulltoRefresh组件嵌套list无法滑动的问题,可能的原因及解决方案如下:

  1. 事件冲突:下拉刷新组件与内部列表组件可能存在事件冲突,导致滑动事件被拦截。检查并调整事件分发逻辑,确保滑动事件能够正确传递给内部列表。

  2. 布局问题:检查PulltoRefresh组件及其内部列表的布局设置,确保列表部分未被遮挡或设置不当导致无法滑动。特别是注意检查高度、边距等属性。

  3. 组件版本:确认使用的PulltoRefresh组件版本是否与HarmonyOS 鸿蒙Next系统兼容。不兼容的版本可能导致功能异常。

  4. 滚动容器:如果PulltoRefresh组件嵌套在另一个可滚动容器中,确保滚动容器的滚动策略设置正确,避免滚动冲突。

  5. 代码审查:仔细审查相关代码,特别是与PulltoRefresh组件和列表相关的部分,查找可能导致滑动失效的代码逻辑。

如果上述方法均未能解决问题,可能是由于特定场景或配置下的特殊问题。此时,建议直接联系鸿蒙系统的技术支持团队进行深入排查。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部