基于vue2.0实现仿百度前端分页效果(一)
2023-09-11 14:19:37 时间
前言
最近在接手一个后台管理项目的时候,由于之前是使用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')
}
}
})
最后
以上,就是前端分页效果实现,下篇文章我将把分页抽离出来做成一个分页组件,毕竟分页在很多页面都需要用到
相关文章
- Amazon SNS移动推送更新——新增百度云推送和Windows平台支持
- 百度编辑器拦截上传图片提交上传腾讯server并返回腾讯url
- 第十五届全国大学生智能车竞赛百度人工智能组相关文件链接
- 百度攻城狮训练营2021-工程能力study4 -- 4.3 如何做好Code Review 脑图整理
- 2014 百度前端一面
- 百度后台开发类笔试题2014校园招聘 武汉站
- vue引入百度地图并渲染坐标点(简单直接)
- Python 百度语音识别与合成REST API及ffmpeg使用
- 百度智能云
- 【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图(超详细)
- 基于vue2.0实现仿百度前端分页效果(二)
- python爬虫解决百度贴吧登陆验证码问题
- 百度有道雅虎的实习面试经历
- 百度是如何识别原件及伪原创文章?
- 百度下载工具我用这两个(目前)
- 百度云BCC密钥对使用
- JavaScript仿百度图片浏览效果(转载)
- 八卦某 G 的前端开发方式及流程--百度FEX前端nwind信息搜集神技能
- 【python百度智能云】:Python — 三种获取__VIEWSTATE、__VIEWSTATEGENERATOR、__EVENTVALIDATION方法。
- 人工智能百度AI:语音识别java类-Array-专题视频课程