vue实现简单的分页功能

@vue实现简单的分页功能

Vue自定义简单的列表分页查询

初学Vue,需要做一个简单的分页功能，实现列表的分页展示。看了其他的文章使用的各种组件都好像有点复杂，所以写了一个简单的，要展示的数据直接写在了Vuex的state中。

数据

写在了state中，可以通过this.$store.state.pdflist调用

// An highlighted block
pdflist:[
{
	id:'1',
	desc:'关于调整人民币理财产品预期收益率的公告',
},
{
	id:'2',
	desc:'关于调整人民币理财产品预期收益率的公告',
},
{
	id:'3',
	desc:'关于调整人民币理财产品预期收益率的公告',
},
{
	id:'4',
	desc:'关于调整人民币理财产品预期收益率的公告',
},
{
	id:'5',
	desc:'关于调整人民币理财产品预期收益率的公告',
},
{
	id:'6',
	desc:'关于调整人民币理财产品预期收益率的公告',
},
{
	id:'7',
	desc:'关于调整人民币理财产品预期收益率的公告',
},
{
	id:'8',
	desc:'关于调整人民币理财产品预期收益率的公告',
},
]

页面HTML代码

// An highlighted block
<template>
	<div>
		<div class="container>
			<div class="introduce" v-for="value in pdflist" :key="value.id>
				<div class="desc">{{value.desc}}</div>
				<hr class="line"/>
			</div>
		</div>
		<div class="filter">
			<div class="lastpage" @click="last()">上一页</div>
			<div class="nextpage">{{pagenum}}/{{totalpage}}</div>
			<div class="nextpage" @click="next()">下一页</div>
		</div>
	</div>
<template>

JS代码

// An highlighted block
<script>
	export default{
		data(){
			return{
				pagenum:1,    //当前页码，初始值为第一页
				numperpage:4  //每页展示的数量
			}
		},
		computed:{
			totalnum(){                               
				var totalnum=0
				let list = this.$store.state.pdflist
				for(var i in list){
					totalnum++;
				}
				return totalnum
			},
			totalpage(){
				var totalpage=Math.ceil(this.totalnum/this.numperpage)   //总数量除以每页要展示的数量得到总页码（取整）
				return totalpage
			},
			pdflist(){
				let pdflist=this.$store.state.pdflist      //得到整个list
				let currentlist=[]                         //用来存放当前页的list
				let num = this.pagenum
				let index = 0+(num-1)*this.numperpage      //每页起始元素的下标
				var distance = this.totalnum-index         
				var curr = 0
				if(distance>=this.numperpage){             //判断最后一页有几条数据
					for(let i = index;i<=index+this.numperpage-1;i++){
						currentlist[curr]=pdflist[i]
						curr++
					}
				}
				else{
					for(let i = index;i<=index+distance-1;i++){
						currentlist[curr]=pdflist[i]
						curr++
					}	
				}
				return currentlist
				},
			},
			methods:{
				next(){                               //跳至下一页，直到最后一页
					if(this.pagenum<this.totalpage){
						this.pagenum=this.pagenum+1
					}
				},
				last(){                               //返回到前一页，直到第一页
					if(this.pagenum>1){
						this.pagenum=this.pagenum-1
					}
				},				
			}
		}
</script>

CSS样式就不贴了。
要注意的点：
（1）原理很简单，先得到整个list，要查询第n页时，第一个元素的下标就是 0+(n-1)*每页展示的数量，通过循环遍历将这一页的元素放到一个新的currentlist中，最后展示currentlist。
（2）对最后一页要做判断，比如设置每页展示四条数据，但是最后一页剩下的数据不到四条时，要改变循环条件，不然会报错

源代码没法复制粘贴，只能又手打了一遍，可能会有一些小错误。