vue2组件系列第四十三节:Pagination 分页

Pagination分页在手机端其实不太常用，在手机端一般是上滑无限加载。

准备工作：

1. 创建一个页面: Pagination.vue
2. 在router.js里配置 Pagination页面的路由

{
 path: '/pagination',
 name: 'pagination',
 component: () => import('./views/Pagination.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/pagination')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>Pagination 分页</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了39个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Pagination分页：

基础方法：

<van-pagination
 v-model="currentPage"
 :total-items="20"
 :items-per-page="5"
 />
data() {
 return {
 currentPage: 1
 }
 },

total-items: 信息条数

items-per-page:每页显示的条数

简单模式：

<van-pagination
 v-model="currentPage"
 :total-items="20"
 :items-per-page="5"
 mode="simple" 
 />

显示省略号：

<van-pagination
 v-model="currentPage"
 :total-items="20"
 :items-per-page="5"
 :show-page-size="3" 
 force-ellipses
 />

show-page-size：显示页码的个数（这个是必须的）

force-ellipses：显示省略号

只有超出显示页码个数才会显示省略号。

此组件有一个change事件，当变换页码时会触发。在实际项目中，在change事件里进行ajax请求当前页的数据。

到目前为止呢，Pagination分页就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油