前端实现简单分页功能

头发还有嘛

已于 2022-08-23 16:38:38 修改

阅读量543

点赞数

文章标签：前端 java html

于 2022-08-23 16:37:38 首次发布

本文链接：https://blog.csdn.net/SuMakabaka/article/details/126487902

版权

本文介绍了一个基于 Vue.js 的前端页面分页组件，通过控制导航按钮实现数据的上一页、下一页切换，并实时更新显示内容。使用了 Math.ceil() 计算总页数，采用 slice() 方法实现每页数据的动态展示。

摘要由CSDN通过智能技术生成

<div class="nav" style="text-align:center;margin: auto;">
	<div class="pravPage" @click="prav">上一页</div>
   <div class="pages" v-for="(item,index) in conpages" :key="index" 
      @click="page(item)" :class="item==cur?'active':''" >{{item}}</div>
   <div class="nextPage" @click="next">下一页</div>
</div>

2.data-return

conpages:'',//总页数
cur:1, //当前页
pageSize:5, //每页要展示数据条数
showPage:[],
tableList:[], //所有页面数据

3.created（也可写在请求所有页面数据后）

//求总页数，Math.ceil()方法 可以对数进行上舍入
this.conpages = Math.ceil(this.tableList.length/this.pageSize); 
this.page(this.cur)

4.methods

page(item){
	            this.cur=item;  //当前页
	            var list = (this.cur-1)*this.pageSize;  //每去一组数据的第一个索引
	            this.showPage = this.tableList.slice(list,list+this.pageSize); //从总数据中取出每页的数据
	          },
                          //上一页
	          prav(){
	            if(this.cur!=1){
	              this.cur--
	              this.page(this.cur)
	            }
	          },
                           //下一页
	          next(){
	            if(this.cur<this.conpages){
	              this.cur++
	              this.page(this.cur)
	            }
	          },

5.css

.nav{width: 250px;height: 30px;display: flex;align-items: center;}
    div[class$=Page]{width: 80px; height: 25px;text-align: center;color: black;
      line-height:25px;background-color: #8f8f8f;margin: 0 5px;}
    div[class=pages]{width: 25px;height: 25px;border: 1px solid #c3c3c3;border-radius: 5px;
      margin: 0 5px;background-color: rgb(236, 235, 235);text-align: center;line-height: 25px;}
    .active{width: 25px;height: 25px;border: 1px solid #8f8f8f;border-radius: 5px;
      margin: 0 5px;background-color: #8f8f8f;text-align: center;
      line-height: 25px;color: #fff;}
    .nav div:hover{cursor: pointer;}
    .box{width: 550px;height: 200px;border: 1px solid #eee;background-color: #f5f5f5;}