Vuetify中的v-pagination如何实现分页

前言

昨天在改一个系统的时候遇到了个技能点，观察解决了好久，终于解决了，趁热打铁，今天来记录一下。

这个系统是个个人博客，目前我也在使用，但是有个地方用的很不舒服。就是首页，源码的作者本意是让不断的下拉，滚动加载出文章。其实他的这种想法倒是也不错，但是问题有两个：

如果有篇文章在第5页，那么我们得往下拉，直到滚动加载到了第5页，我们才会发现它。
博客右边的内容，是自适应的，也就是意外着只要左边没有拉到底，右边一直也就到不了底（这个不知道大家能不能明白）

所以体验感很不好，我就想着改改吧，按照固有的用户思维，加上个分页，体验感应该会好很多。

实现思路

翻了下他的代码，前端的话，没有集成分页插件，而是写了个无限滚动加载的代码：

<infinite-loading @infinite="infiniteHandler"><div slot="no-more" /></infinite-loading>
复制代码

infiniteHandler方法的代码如下：

infiniteHandler($state) {let md = require("markdown-it")();fetchList(this.params).then(res => {if (res.data.records.length) {// 去除markdown标签res.data.records.forEach(item => {if (item.contentMd != null) {item.content = md.render(item.contentMd).replace(/<\/?[^>]*>/g, "").replace(/[|]*\n/, "").replace(/&npsp;/gi, "");}this.articleList.push(item);});this.params.pageNo++;$state.loaded();} else {$state.complete();}});},
复制代码

主要内容就是从后台接口里面拿到数据之后拼接在articleList数组中，实现的无限滚动加载。

既然我需要改，那就需要将此处的代码彻底的换一下，查了查这个是那个框架，慢慢的从package.json文件中，找到些门路，用的是vuetify``框架。

"vue-social-share": "0.0.3",
复制代码

按照以往的思路，直接去百度这个框架，它肯定也集成了分页插件,百度了下，还真有，地址为： Pagination（分页）

可以发现，有不少样式供我们使用，大家可以找个和自己项目符合的放上来就行，点击<>就能查看源代码，拷贝到项目中，我这边用的是圆形的那个。

<template><div class="text-center"><v-paginationv-model="page":length="4"circle></v-pagination></div>
</template>
复制代码

<script>export default {data () {return {page: 1,}},}
</script>
复制代码

上面是源代码，我们拿到项目中之后，需要稍微的改改，以我自己的项目为例：

vue代码

 <!--分页--><v-paginationstyle="margin-top: 3%"v-model="page.pageIndex":length="page.totalPages":total-visible="page.totalPages"circle@input="pageClick(page)"></v-pagination>
复制代码

v-model：当前选中的页数，pageIndex是我在data中声明的变量
:length：分页组件的长度，我这边显示的是总页数，后期得改改，一般都是5。
total-visible：指定最大可见分页数
circle：让分页的组件变成圆形，默认是方形的
@input：被绑定模型的更新，也就是我们点击页数，或者上一页、下一页的时候，会走这个方法（这个地方一定要注意，我原来以为只有点击具体页数的时候才会触发，绕了好多弯路）

data中的变量：

page: {//当前页pageIndex: 1,//页大小pageSize: 5,//总特殊totalPages: 0,//总记录数totalCount: 0}
复制代码

methods中的代码：（主要是用来更新分页数据的）

//分页获取文章信息pageClick(page) {this.page.pageIndex = page.pageIndex;this.articleList = [];let md = require("markdown-it")();fetchList(this.page).then(res => {if (res.data.records.length) {// 去除markdown标签res.data.records.forEach(item => {if (item.contentMd != null) {item.content = md.render(item.contentMd).replace(/<\/?[^>]*>/g, "").replace(/[|]*\n/, "").replace(/&npsp;/gi, "");}this.articleList.push(item);});}});},//初始化获取文章列表getArticleListByPageInit() {this.articleList = [];let md = require("markdown-it")();fetchList(this.page).then(res => {if (res.data.records.length) {// 去除markdown标签res.data.records.forEach(item => {if (item.contentMd != null) {item.content = md.render(item.contentMd).replace(/<\/?[^>]*>/g, "").replace(/[|]*\n/, "").replace(/&npsp;/gi, "");}this.articleList.push(item);});}//总页数放进去this.page.totalCount = res.data.total;this.page.totalPages = res.data.pages;});},
复制代码

忽然发现代码有优化的空间，待会发完文章之后我去优化一下。

getArticleListByPageInit方法是在created里面调用的，也就是让页面一进来我们就先初始化第一页的数据。

后台控制器的分页代码：

@BusinessLogger(value = "首页-用户访问首页",type = "查询",desc = "查询所有文章")@GetMapping(value = "/list")@ApiOperation(value = "文章列表", httpMethod = "GET", response = ResponseResult.class, notes = "文章列表")public ResponseResult listWebArticle(Integer pageIndex,Integer pageSize) {return  articleService.listWebArticle(pageIndex,pageSize);}
复制代码

servieImpl中的代码：

/***  获取文章列表* @return*/@Overridepublic ResponseResult listWebArticle(Integer pageIndex, Integer pageSize) {Page<Object> page = new Page<Object> ();page.setCurrent(pageIndex);page.setSize(pageSize);Page<ArticlePreviewVO> articlePreviewDTOPage =baseMapper.selectPreviewPage(page,PUBLISH.code,null,null);articlePreviewDTOPage.getRecords().forEach(item -> item.setTagVOList(tagsMapper.findByArticleIdToTags(item.getId())));return ResponseResult.success(articlePreviewDTOPage);}
复制代码

最后实现的效果如下所示：

Vuetify中的v-pagination如何实现分页相关推荐

基础平台项目之集成Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能. 本博客是基于一款正在开发中的github开源项目的,项目代码地址:https://git ...
Springboot中MyBatisplus使用IPage和Page分页
一.需求:实现Springboot中MyBatisplus使用IPage和Page分页二.技术:MyBatisplus的IPage和Page 三.实现 1.代码结构 2.代码详情 (1)Contro ...
vuetify table_vuex 封装设计全局可用的vuetify中的snackbar
Vuetify是 Vue 的一个UI框架,帮助我们快速搭建应用.有众多优秀的组件可供选择: v-data-table 显示表格数据 v-dialog 实现弹框设计 v-toolbar等实现横向菜单 . ...
oracle 查看动态性能视图,Oracle 中的V$ 动态性能视图
v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...
jQueryPager(JQuery分页插件pagination实现Ajax分页)
jQueryPager(JQuery分页插件pagination实现Ajax分页) 下载地址 jQueryPager(JQuery分页插件pagination实现Ajax分页).rar 转载于:htt ...
软件开发中的V字模型与W模型（使开发与侧试分离）
■前言关于 W字模型,以前好像听过, 但是印象不深刻,几天有听别人说了一遍, 采用W字模型的主要目的是,测试与开发分离. ■瀑布开发中的V字模型与 W模型 --- ■吐槽 ⇒ W字模型很少有项目 ...
html如何设置打印分页打印出来,网页中如何用 CSS 设置打印分页符
Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. 第 1 页第 2 页第 3 页任何浏览器 ...
YII2框架中 where limit offset 函数对分页的使用
YII2框架中 where limit offset 函数对分页的使用以前公司用的是TP框架,直接往limit函数里面传两个动态的参数就可以实现分页的效果了,刚换了公司这个公司用的是YII2 框架, ...
利用查询条件对象，在Asp.net Web API中实现对业务数据的分页查询处理
在Asp.net Web API中,对业务数据的分页查询处理是一个非常常见的接口,我们需要在查询条件对象中,定义好相应业务的查询参数,排序信息,请求记录数和每页大小信息等内容,根据这些查询信息,我们在 ...

Vuetify中的v-pagination如何实现分页

前言

实现思路

Vuetify中的v-pagination如何实现分页相关推荐

最新文章

热门文章