HarmonyOS鸿蒙Next中@abner/refresh怎么样让他在最底端没有数据的时候显示没有更多数据了？

HarmonyOS鸿蒙Next中@abner/refresh怎么样让他在最底端没有数据的时候显示没有更多数据了？ 我用footerLoadLayout不太行啊

3 回复

可通过设置loadMoreFooterAttribute属性中的footerNothingText字段控制底部无数据文本的展示。

示例如下：

ListView({
  items: this.array, //数据源 数组,任意类型
  itemLayout: (item, index) => this.itemLayout(item, index),
  controller: this.controller, //控制器，负责关闭下拉和上拉
  isLazyData: false, //禁止懒加载，也就是使用ForEach进行数据加载
  onRefresh: () => {
    //下拉刷新
    this.controller.finishRefresh();
  },
  onLoadMore: () => {
    //上拉加载
    this.controller.finishLoadMore();
  },
  // 设置底部暂无数据的提示文本
  loadMoreFooterAttribute: {
    footerNothingText: '这里是底部暂无数据提示文本'
  }
})

更多关于HarmonyOS鸿蒙Next中@abner/refresh怎么样让他在最底端没有数据的时候显示没有更多数据了？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，@abner/refresh 组件可以通过监听滚动事件来判断是否到达了列表的底部。当列表滚动到底部且没有更多数据时，可以在底部显示“没有更多数据”的提示。具体实现步骤如下：

  1. 监听滚动事件：在 @abner/refresh 组件中，使用 onScroll 事件监听列表的滚动。

  2. 判断是否到达底部：在滚动事件的回调函数中，判断当前滚动位置是否到达列表的底部。可以通过比较 scrollTop、scrollHeight 和 clientHeight 来实现。

  3. 显示提示：当判断到达底部且没有更多数据时，可以在列表的底部添加一个提示元素，显示“没有更多数据”。

以下是示例代码：

import { Refresh } from '@abner/refresh';

export default {
  data() {
    return {
      list: [], // 你的数据列表
      noMoreData: false // 是否没有更多数据的标志
    };
  },
  methods: {
    onScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight && !this.noMoreData) {
        this.noMoreData = true;
        // 在这里添加显示“没有更多数据”的逻辑
      }
    }
  },
  render() {
    return (
      <Refresh onScroll={this.onScroll}>
        {this.list.map(item => (
          <div key={item.id}>{item.content}</div>
        ))}
        {this.noMoreData && <div>没有更多数据</div>}
      </Refresh>
    );
  }
};

在HarmonyOS鸿蒙Next中使用@abner/refresh组件时，可以通过监听onLoadMore事件，并在数据加载完成后判断是否已无更多数据。如果没有更多数据，可以设置hasMore为false，同时通过footer属性自定义底部提示为“没有更多数据”。示例代码如下：

<abner-refresh
  onRefresh={handleRefresh}
  onLoadMore={handleLoadMore}
  hasMore={hasMore}
  footer={hasMore ? '加载中...' : '没有更多数据'}
/>

在handleLoadMore中，判断数据加载完成后设置hasMore为false即可。

回到顶部