Vue.js分页组件如何实现diVuePagination

这篇文章给大家分享的是有关Vue.js分页组件如何实现diVuePagination的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联服务项目包括襄城网站建设、襄城网站制作、襄城网页制作以及襄城网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,襄城网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到襄城省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

一.介绍

Vue.js 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二.创建初始化项目

这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置。

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // (缩写)相当于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

App.vue:



pageHome.vue:



pageInfo.vue:



pageNews.vue:



预览效果:

Vue.js分页组件如何实现diVuePagination

三.分页静态结构和样式

divuePage.vue:



main.js注册:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注册组件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // (缩写)相当于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

pageHome.vue引用:



效果预览:

Vue.js分页组件如何实现diVuePagination

四.分页组件实现逻辑分析

我们分析一下如何实现我们的分页组件:

从分页组件考虑:

分页组件需要显示页数,那么就需要传递给分页组件总用多少页这个状态,

上一页和下一页存在不可用状态,在第一页上一页不可用,所以要把当前所在页数传递,同样页数的焦点位置也需要它判断,

然后就是方法,我们页数和按钮的点击都是发起请求,携带的参数就是当前点击的页数,

1.总页数,当前所在页,可在父组件传递进入

2.发起请求的方法可以通过组件交互通信实现

1的数据都是接口会返回给我们的,我们直接以属性传递即可:

Vue.js分页组件如何实现diVuePagination

2的实现也很简单,我们其实已经处理模拟使用过了:

Vue.js分页组件如何实现diVuePagination

我们只需要自定义事件,让分页组件$emit即可:

Vue.js分页组件如何实现diVuePagination

pageHome.vue:



五.分页组件逻辑编写

divuePage.vue我们接受了这些传递的内容,总页数和当前所在页,然后点击第一页触发自定义事件,传递给父组件一个1,获取第一页数据:



1.页数显示

我们的首要工作就是把页数显示出来,我们已经接收了总页数,其实这个问题很容易解决,我们设置一个计算属性,属性依据总页数生成一个数组,从1到n即可:

Vue.js分页组件如何实现diVuePagination

显示:

Vue.js分页组件如何实现diVuePagination

这样还不够健壮,还有一个就是总页数5做分界线,大于5就显示当前到后4个,

比如在第3页,显示:3 4 5 6 7

第2页,显示:2 3 4 5 6

好了我们加入一些小的逻辑判断:

Vue.js分页组件如何实现diVuePagination

我们要给当前页加一个类名标识,已经获取当前的页数了,我们加一个判断就可以了,在v-for中:

Vue.js分页组件如何实现diVuePagination

我们在加入点击事件,拿到点击的item就是要请求后台数据的参数page:

Vue.js分页组件如何实现diVuePagination

定义这个方法:

Vue.js分页组件如何实现diVuePagination

完整代码:



效果测试:

Vue.js分页组件如何实现diVuePagination

2.第一页和最后一页处理

这个很简单,只是传递page参数,我们已经获取总页数,直接设置即可!

Vue.js分页组件如何实现diVuePagination

Vue.js分页组件如何实现diVuePagination

3.上一页和下一页处理

这个对比第一页需要加入特殊的处理,当前是第一页,这个按钮就不可用状态,下一页一样的逻辑判断当前是不是在最后一页:

Vue.js分页组件如何实现diVuePagination

调用位置加入事件,在加一个是否可用的类名:

Vue.js分页组件如何实现diVuePagination

全部代码:



效果测试:

Vue.js分页组件如何实现diVuePagination

4.跳页处理

这个我们获取输入框的值,直接调用,不过对输入的内容必须有一些判断限制:

Vue.js分页组件如何实现diVuePagination

加一个data:

Vue.js分页组件如何实现diVuePagination

使用位置:

Vue.js分页组件如何实现diVuePagination

5.显示总页数

这个是最简单的:

Vue.js分页组件如何实现diVuePagination

六.分页全部代码和测试

divuePage.vue:



我们现在在pageHome.vue做了使用,这个模拟数据包含7页,我们在另外两个组件也使用分页组件,测试小于5页和只有1页的效果:

直接粘贴就可以在另外的组件使用。

只有1页:

Vue.js分页组件如何实现diVuePagination

小于5页:

Vue.js分页组件如何实现diVuePagination

测试没有太大问题!

七.优化和改进建议

当然不是样式的优化,这个需要设计的参与,我们还是显示的优化和改进,比如:

Vue.js分页组件如何实现diVuePagination

我们是不是该有一个...

还有就是...

可以参考别的分页效果,然后你可以不断的改进!

八.完整代码

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注册组件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // (缩写)相当于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

App.vue:


 

 

divuePage.vue:



pageHome.vue:



pageInfo.vue:



pageNews.vue:



感谢各位的阅读!关于“Vue.js分页组件如何实现diVuePagination”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网站标题:Vue.js分页组件如何实现diVuePagination
URL地址:http://myzitong.com/article/jsdsho.html