当前位置：首页 > news >正文

鸿蒙OSUniApp 制作带有分页功能的列表组件#三方框架 #Uniapp

news 2025/5/31 7:52:19

UniApp 制作带有分页功能的列表组件

前言

在移动应用开发中，列表展示是最常见的界面之一。随着数据量的增加，分页加载成为提升性能和用户体验的关键手段。无论是新闻资讯、商品列表还是评论区，分页功能都能有效避免一次性加载过多数据导致的卡顿。本文将以 UniApp 为基础，详细讲解如何开发一个带有分页功能的通用列表组件，并结合鸿蒙（HarmonyOS）平台的适配与优化建议。

一、需求与设计思路

1. 需求分析

支持下拉刷新与上拉加载更多
分页参数可配置，适配不同后端接口
加载状态与无数据提示
兼容鸿蒙平台，适配不同分辨率与性能要求
组件化设计，便于复用

2. 设计思路

使用 scroll-view 组件实现滚动与触底监听
通过 props 传递分页参数与数据请求方法
内部维护当前页码、数据列表、加载状态
提供插槽支持自定义列表项内容
结合 CSS 动画提升加载体验

二、核心代码实现

1. 组件结构

<template><scroll-viewclass="paged-list"scroll-y@scrolltolower="loadMore"@refresherrefresh="refresh":refresher-enabled="true":refresher-triggered="isRefreshing"><slot name="item" v-for="item in list" :item="item" :key="item.id"></slot><view v-if="loading" class="loading">加载中...</view><view v-if="noMore" class="no-more">没有更多了</view><view v-if="list.length === 0 && !loading" class="empty">暂无数据</view></scroll-view>
</template>

2. 脚本逻辑

<script>
export default {name: 'PagedList',props: {pageSize: { type: Number, default: 10 },fetchData: { type: Function, required: true }, // (page, pageSize) => Promise},data() {return {list: [],page: 1,loading: false,noMore: false,isRefreshing: false,};},methods: {async loadList(reset = false) {if (this.loading || (this.noMore && !reset)) return;this.loading = true;if (reset) {this.page = 1;this.noMore = false;}try {const data = await this.fetchData(this.page, this.pageSize);if (reset) {this.list = data;} else {this.list = this.list.concat(data);}if (!data || data.length < this.pageSize) {this.noMore = true;} else {this.page++;}} catch (e) {uni.showToast({ title: '加载失败', icon: 'none' });} finally {this.loading = false;this.isRefreshing = false;}},loadMore() {this.loadList();},refresh() {this.isRefreshing = true;this.loadList(true);},},mounted() {this.loadList(true);},
};
</script>

3. 样式设计

<style scoped>
.paged-list {height: 100vh;background: #f8f8f8;
}
.loading, .no-more, .empty {text-align: center;color: #999;padding: 32rpx 0;font-size: 28rpx;
}
</style>

三、父页面集成与使用示例

<template><paged-list :fetchData="getList" :pageSize="8"><template #item="{ item }"><view class="list-item"><text>{{ item.title }}</text></view></template></paged-list>
</template><script>
import PagedList from '@/components/PagedList.vue';
export default {components: { PagedList },methods: {async getList(page, pageSize) {// 这里以模拟接口为例，实际可对接后端APIconst res = await uni.request({url: `https://api.example.com/items?page=${page}&size=${pageSize}`,});return res.data.list || [];},},
};
</script><style scoped>
.list-item {background: #fff;margin: 16rpx 24rpx;border-radius: 12rpx;padding: 32rpx 24rpx;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
</style>