基于vue2.0实现仿百度前端分页效果(一)
前言
最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的bootstrap框架,所以需要使用到vue来实现前端的分页效果。
先看实现效果图
代码实现
分析一下,我们想要的效果是什么样的
1、每页只显示10个可见分页数
2、当点击到第7页的时候,左边显示从2开始,第一页不可见,右边显示到11页
对于的算法如下:
left = curPage - pageGroup/2
right = curPage + pageGroup/2 - 1
其实实现也非常简单,并不难
下面是整个实现分页的代码
//html代码
<ul class="clearfix">
<li @click="changePage(curPage-1)">上一页</li>
<!-- <li @click="changePage(1)">首页</li> -->
<li :class="{'active':curPage==item.val}" v-for="item in pagelist" v-text="item.text" @click="changePage(item.val)">1</li>
<!-- <li @click="changePage(totalPage)">尾页</li> -->
<li @click="changePage(curPage+1)">下一页</li>
</ul>
<div style="padding: 20px;">
{{curPage}}/{{totalPage}}页
</div>
//js代码
var vm = new Vue({
el: '#app',
data: {
msg:'hello',
curItem:'',
curPage:1,
total:211,
limit:10,
pageGroup:10//分页条数 默认7个分页数
},
created: function () {
console.log('created')
},
mounted: function () {
console.log('mounted')
},
computed:{
totalPage:function(){
return Math.ceil(this.total / this.limit)
},
pagelist:function(){
var list = [];
var count = Math.floor(this.pageGroup/2), center = this.curPage;
var left = 1,right = this.totalPage;
if(this.totalPage>this.pageGroup){
if(this.curPage>count+1){
if(this.curPage < this.totalPage - count){
left = this.curPage - count;
right = this.curPage + count-1;
}else{
left = this.totalPage - this.pageGroup+1;
}
}else{
right = this.pageGroup;
}
}
// 遍历添加到数组里
while(left<=right){
list.push({
text:left,
val:left
});
left++;
}
return list;
}
},
methods:{
changePage:function(idx){
if(idx!=this.curPage && idx>0 && idx<=this.totalPage){
this.curPage = idx;
}
},
login:function(){
alert('login')
}
}
})
最后
以上,就是前端分页效果实现,下篇文章我将把分页抽离出来做成一个分页组件,毕竟分页在很多页面都需要用到
基于vue2.0实现仿百度前端分页效果(一)的更多相关文章
- 基于vue2.0实现仿百度前端分页效果(二)
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
- vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件
vue-swiper 基于 Vue2.0 开发,基本满足大部分功能 轻量.高性能轮播插件.目前支持 无缝衔接自动轮播.无限轮播.手势轮播 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB ...
- 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)
前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- 基于vue2.0的在线电影APP,
基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...
随机推荐
- JSP内置对象page/pageContext/Config/Exception
Config对象 config对象实是在一个Servlet初始化时,JSP引擎向它传递信息用的,此信息包括Servlet初始化时所要用到的参数(通过属性名和属性值构成)以及服务器的有关信息(通过传递一 ...
- Java集合:HashSet的源码分析
Java集合---HashSet的源码分析 一. HashSet概述: HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该 ...
- 学习Acegi应用到实际项目中(5)
实际企业应用中,用户密码一般都会进行加密处理,这样才能使企业应用更加安全.既然密码的加密如此之重要,那么Acegi(Spring Security)作为成熟的安全框架,当然也我们提供了相应的处理方式. ...
- python 更换 版本
这是一个悲伤的安装ipython的过程. 写下来留个教训吧. 也是希望对博友一些帮助吧. 注: 我也写了一篇window下安装bpython的文章(个人感觉bpython要比ipython强大的多), ...
- s2 Docker环境的快速搭建方法
常规linux下安装 centos7 下配置docker源并安装 cat >/etc/yum.repos.d/docker.repo< [dockerrepo] name=Docker R ...
- UEditor的jQuery插件化 -转
UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...
- FreeRTOS的内存管理
FreeRTOS提供了几个内存堆管理方案,有复杂的也有简单的.其中最简单的管理策略也能满足很多应用的要求,比如对安全要求高的应用,这些应用根本不允许动态内存分配的. FreeRTOS也允许你自己实现内 ...
- Docker集群管理工具 - Kubernetes 部署记录 (运维小结)
一. Kubernetes 介绍 Kubernetes是一个全新的基于容器技术的分布式架构领先方案, 它是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernete ...
- Spring Data Solr的分组查询 for 搜索面板的商品分类
private List searchCategoryList(Map searchMap) { SimpleQuery query = new SimpleQuery(new Criteria(&q ...
- IDEA tomcat 热部署不生效的问题