uni-app实现前端分页功能

最新推荐文章于 2025-05-30 14:10:27 发布

代码的边城

最新推荐文章于 2025-05-30 14:10:27 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 uni-app 文章标签：前端 uni-app vue.js

本文链接：https://blog.youkuaiyun.com/Magic_xp7/article/details/130550037

今天晚上被这个分页功能折腾了一个晚上，真是搞人心态。

就想实现一个简单的前端实现的分页功能都这么麻烦，看的每个教程都要连后端，反倒前端怎么处理分页的逻辑都是支支吾吾的，大半夜气死我了

下面是我搞出来的代码，留个纪念以防以后有需要

<template>
	<view>
		<!-- 渲染当前页的内容 -->
		<view v-for="item in paginatedItems" :key="item.id">
			<view>{
  { item.word }}</view>
		</view>
		<!-- 分页器 -->
		<uni-pagination :current="currentPage" :total="total" @change="pageChanged" :pageSize="pageSize" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					{ id: 1, word: "item 1" },
					{ id: 2, word: "item 2" },
					{ id: 3, word: "item 3" },
					{ id: 4, word: "item 4" },
					{ id: 5, word: "item 5" },
					{ id: 6, word: "item 6" },
					{ id: 7, word: "item 7" },
					{ id: 8,