vue实现ul翻页
Vue 实现 ul 翻页
在 Vue 中实现 ul 列表的翻页功能，可以通过计算属性分割数据并结合分页控件完成。以下是具体实现方式：
数据准备与分页逻辑
假设有一个数组 listData 包含所有列表项数据，通过计算属性 paginatedData 返回当前页的数据：
data() {
return {
listData: [...], // 你的原始数据数组
currentPage: 1,
itemsPerPage: 10 // 每页显示数量
};
},
computed: {
paginatedData() {
const start = (this.currentPage - 1) * this.itemsPerPage;
const end = start + this.itemsPerPage;
return this.listData.slice(start, end);
},
totalPages() {
return Math.ceil(this.listData.length / this.itemsPerPage);
}
}模板渲染
在模板中使用 v-for 渲染分页后的数据，并添加分页导航控件：
<ul>
<li v-for="(item, index) in paginatedData" :key="index">
{{ item.text }} <!-- 根据实际数据结构调整 -->
</li>
</ul>
<div class="pagination">
<button
@click="currentPage--"
:disabled="currentPage === 1">
上一页
</button>
<span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
<button
@click="currentPage++"
:disabled="currentPage >= totalPages">
下一页
</button>
</div>样式优化
为分页控件添加基础样式：
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 20px;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}高级功能扩展
-
动态页码跳转
添加输入框实现页码跳转：<input type="number" v-model.number="jumpPage" min="1" :max="totalPages" @keyup.enter="currentPage = jumpPage"> -
页面尺寸切换
增加下拉菜单调整每页显示数量：data() { return { pageSizeOptions: [5, 10, 20] }; }<select v-model="itemsPerPage"> <option v-for="size in pageSizeOptions" :value="size">{{ size }}条/页</option> </select>
注意事项
- 如果数据是异步加载的，需在数据获取完成后重置
currentPage为 1。 - 对于大数据量，考虑使用虚拟滚动（如
vue-virtual-scroller）优化性能。
