1. 在你的组件中引入 Pagination 组件：
<template>
<vant-pagination
v-model="currentPage"
:total-items="totalItems"
:items-per-page="itemsPerPage"
@change="onChange"
/>
</template>
<script>
import { Pagination } from 'vant';
export default {
components: {
[Pagination.name]: Pagination,
},
data() {
return {
currentPage: 1, // 当前页码
totalItems: 100, // 总条目数
itemsPerPage: 10, // 每页显示条目数
};
},
methods: {
onChange(page) {
// 处理页码变化的逻辑
console.log('当前页码:', page);
},
},
};
</script>
在这个示例中：
- v-model="currentPage" 用于双向绑定当前页码。
- :total-items="totalItems" 设置总条目数。
- :items-per-page="itemsPerPage" 设置每页显示的条目数。
- @change 事件会在页码变化时触发，你可以在 onChange 方法中处理页码变化的逻辑。
根据实际需求，你可以自定义样式、添加其他属性或者定制分页器的显示。
转载请注明出处：http://www.zyzy.cn/article/detail/5766/Vant