HarmonyOS鸿蒙Next中list长列表，上滑加载列表demo，下拉刷新的demo

HarmonyOS鸿蒙Next中list长列表，上滑加载列表demo，下拉刷新的demo

  • list长列表，上滑加载列表demo，下拉刷新的demo
3 回复

可通过 @ohos/pulltorefresh 去实现

import { PullToRefresh } from '@ohos/pulltorefresh';

@Entry
@Component
struct Index {
    @State refreshText: string = '';

    private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
    private dataStrings: string[] = [
        '我的评论', 
        '与我相关', 
        '个人中心1', 
        '个人中心2', 
        '个人中心3', 
        '我的发布', 
        '设置', 
        '退出登录'
    ];

    @State data: string[] = this.dataStrings;

    // 需绑定列表或宫格组件
    private scroller: Scroller = new Scroller();

    build() {
        Column() {
            PullToRefresh({
                // 必传项，列表组件所绑定的数据
                data: $data,
                // 必传项，需绑定传入主体布局内的列表或宫格组件
                scroller: this.scroller,
                // 必传项，自定义主体布局，内部有列表或宫格组件
                customList: () => {
                    // 一个用@Builder修饰过的UI方法
                    this.getListView();
                },
                // 可选项，下拉刷新回调
                onRefresh: () => {
                    return new Promise<(resolve, reject) => {
                        // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
                        setTimeout(() => {
                            resolve('刷新成功');
                            this.data = this.dataNumbers;
                        }, 2000);
                    });
                },
                // 可选项，上拉加载更多回调
                onLoadMore: () => {
                    return new Promise<(resolve, reject) => {
                        // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
                        setTimeout(() => {
                            resolve('');
                            this.data.push("增加的条目" + this.data.length);
                        }, 2000);
                    });
                },
                customLoad: null,
                customRefresh: null
            });
        }
    }

    @Builder
    private getListView() {
        List({ space: 20, scroller: this.scroller }) {
            ForEach(this.data, (item: string) => {
                ListItem() {
                    Text(item)
                        .width('100%')
                        .height(150)
                        .fontSize(20)
                        .textAlign(TextAlign.Center)
                        .backgroundColor('#95efd2');
                }
            });
        }
        .backgroundColor('#eeeeee')
        .divider({ strokeWidth: 1, color: 0x222222 })
        .edgeEffect(EdgeEffect.None);
        // 必须设置列表为滑动到边缘无效果
    }
}

更多关于HarmonyOS鸿蒙Next中list长列表，上滑加载列表demo，下拉刷新的demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）中，实现长列表的上滑加载和下拉刷新功能，通常使用ListContainer组件结合SmartRefreshLayout来实现。

  1. 上滑加载列表：
    上滑加载通常通过监听列表的滚动事件来实现。当用户滑动到列表底部时，触发加载更多数据的逻辑。可以使用ListContainer的setItemProvider方法设置数据适配器，并在适配器中判断是否到达列表底部，然后加载新数据。

  2. 下拉刷新：
    下拉刷新功能可以通过SmartRefreshLayout组件实现。SmartRefreshLayout是一个支持下拉刷新和上拉加载的布局容器。你可以在布局文件中将ListContainer包裹在SmartRefreshLayout中，然后通过setRefreshListener设置刷新监听器，在监听器中执行刷新数据的操作。

示例代码结构如下：

<com.scwang.smart.refresh.layout.SmartRefreshLayout
    ohos:id="$+id:refreshLayout"
    ohos:width="match_parent"
    ohos:height="match_parent">

    <com.huawei.hms.ui.ListContainer
        ohos:id="$+id:listContainer"
        ohos:width="match_parent"
        ohos:height="match_parent"/>

</com.scwang.smart.refresh.layout.SmartRefreshLayout>

// 初始化SmartRefreshLayout和ListContainer
SmartRefreshLayout refreshLayout = (SmartRefreshLayout) findComponentById(ResourceTable.Id_refreshLayout);
ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_listContainer);

// 设置下拉刷新监听器
refreshLayout.setRefreshListener(new OnRefreshListener() {
    @Override
    public void onRefresh(RefreshLayout refreshLayout) {
        // 执行刷新数据的操作
        // 刷新完成后调用 refreshLayout.finishRefresh() 结束刷新
    }
});

// 设置ListContainer的适配器
listContainer.setItemProvider(new ListContainer.ItemProvider() {
    // 实现适配器方法
    // 在适配器中判断是否到达列表底部，触发加载更多数据的逻辑
});

通过这种方式，你可以在鸿蒙系统中实现长列表的上滑加载和下拉刷新功能。

在HarmonyOS鸿蒙Next中，实现长列表的上滑加载和下拉刷新可以通过ListContainer和RefreshLayout组件来实现。以下是一个简单的示例代码：

上滑加载更多

  1. 监听滚动事件：在ListContainer中设置滚动监听器，当滚动到底部时触发加载更多数据。
listContainer.setItemProvider(new ListContainer.ItemProvider() {
    @Override
    public int getCount() {
        return dataList.size();
    }

    @Override
    public Object getItem(int position) {
        return dataList.get(position);
    }

    @Override
    public void onItemRangeChanged(int start, int count) {
        // 数据变化时刷新列表
    }
});

listContainer.setScrollListener(new ListContainer.ScrollListener() {
    @Override
    public void onScroll(int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if (firstVisibleItem + visibleItemCount >= totalItemCount) {
            // 加载更多数据
            loadMoreData();
        }
    }
});

下拉刷新

  1. 使用RefreshLayout：RefreshLayout提供了下拉刷新的功能，通过监听RefreshListener来实现数据刷新。
RefreshLayout refreshLayout = (RefreshLayout) findComponentById(ResourceTable.Id_refresh_layout);
refreshLayout.setRefreshListener(new RefreshLayout.RefreshListener() {
    @Override
    public void onRefresh() {
        // 刷新数据
        refreshData();
        refreshLayout.finishRefresh();
    }
});

数据加载与刷新

  1. 数据加载：在loadMoreData和refreshData方法中实现数据的加载和刷新逻辑，并更新ListContainer的数据源。

通过以上代码，你可以实现长列表的上滑加载和下拉刷新功能。

回到顶部