首先，确保你已经引入了 Vant 4 和 Vue.js。你可以通过在 HTML 文件中引入相关的 CSS 和 JavaScript 文件，或者通过 npm 安装并在 Vue 组件中引入。
然后，在你的 Vue 组件中，可以使用以下代码来创建一个基本的 Vant Pagination：
<template>
<div>
<!-- Pagination 组件 -->
<van-pagination
v-model="currentPage"
:total-items="totalItems"
:items-per-page="itemsPerPage"
@change="handlePageChange"
/>
<!-- 显示当前页数和总页数 -->
<div style="text-align: center; margin-top: 20px;">
当前页数: {{ currentPage }}, 总页数: {{ totalPages }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1, // 当前页数
totalItems: 100, // 总条目数
itemsPerPage: 10, // 每页显示条目数
};
},
computed: {
// 计算总页数
totalPages() {
return Math.ceil(this.totalItems / this.itemsPerPage);
},
},
methods: {
// 处理页码变化事件
handlePageChange(currentPage) {
// 在这里可以处理页码变化时的逻辑，例如加载对应页的数据
console.log('当前页码:', currentPage);
},
},
};
</script>
在上述代码中，<van-pagination> 表示分页器容器，通过设置 v-model 来绑定当前页数。通过 :total-items 设置总条目数，:items-per-page 设置每页显示条目数。通过 @change 监听页码变化事件，调用 handlePageChange 方法处理页码变化时的逻辑。
在实际使用中，你可以根据需要调整总条目数、每页显示条目数等参数，以及在 handlePageChange 方法中处理页码变化时的逻辑，例如加载对应页的数据。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5850/Vant