vue实现分页栏效果

{
 data:{
 list:[
 {user_id:1,nickName:'csdn1',sex:0,desc:'帅哥'},
 {user_id:2,nickName:'csdn2',sex:0,desc:'帅哥'},
 {user_id:3,nickName:'csdn3',sex:1,desc:'美女'},
 ...
 ],
 pageInfo:{
 totalItem:44,
 totalPage:3,
 perPage:15,
 curPage:1
 }
 }
}

 // get请求获取用户数据函数
 getRequestFunc: function(formData, requestUrl){
 var that = this;
 $.get(
 requestUrl,//请求数据路径，即接口
 formData,//请求数据参数，除了必需的参数，还有page这个非必须的参数，它的作用是获取当前页的数据列表。例如：page=10时，获取的是第十页的数据
 res => {
 that.personLists = res.data.list;//用户数据列表
 that.pageInfo = res.data.pageInfo;//这个数据里面包括：当前页、总页数、当前页数目等
 that.curPage = res.data.paging.curPage;//当前页
 that.totalPage = res.data.paging.totalPage;//总页数
 //用于处理显示分页栏信息
 that.handlePageBar(that.totalPage) 
 });
 },

// 处理分页栏
 handlePageBar: function(pageNum){
 var that = this;
 if(that.pageArr == '' || that.pageArr == null){
 var pageArr = [];
 if(pageNum > 10){
 for(var i = 1; i < 11; i++){
 pageArr.push(i);
 }
 }else{
 for(var i = 1; i < pageNum + 1; i++){
 pageArr.push(i);
 }
 }
 that.pageArr = pageArr;
 }else if(that.pageArr.length < 10){
 that.pageArr = pageArr;
 }else{
 if((that.pageArr)[9] == that.page-1){
 that.handleNextExtremePage(pageNum);
 }else if((that.pageArr)[0] == parseInt(that.page)+1){
 that.handlePreExtremePage(pageNum);
 }
 }
 },
 
"htmlcode">

"contentBottom">
 <span>共{{pageInfo.totalItem}}条，共{{pageInfo.totalPage}}页，当前页{{personLists.length}}条</span>
 <span class="indexPage" @click="goToIndexPage">首页</span>
 <span class="prePage" @click="goToPrePage">&lt;</span>
 <span class="preTen" v-show="pageArr[0] > 10 " @click="preTen">...</span>
 <span class="knownPage" :class="{'addBgClass': index == curPage}" v-for="index in pageArr" @click="appointPage" :data-curPage="index">{{index}}</span>
 <span class="nextTen" v-show="pageArr.length < 10 " @click="nextTen">...</span>
 <span class="nextPage" @click="goToNextPage"</span>
 <span class="lastPage" @click="goToLastPage">尾页</span>
 <input type="text" class="inputPage" ref="inputPage" v-show="totalPage > 10 " />
 <span class="jumpToInputPage" @click="jumpToInputPage" v-show="totalPage > 10 ">跳转</span>
</div>


CSS代码：


"htmlcode">

// 显示后十页。只有在page大于10时这个扩充按钮才会显示
 nextTen: function(){
 var that = this;
 var pageNum = that.totalPage;
 that.handleNextExtremePage(pageNum);
 },
 
 // 显示前十页
 preTen: function(){
 var that = this;
 var pageNum = that.totalPage;
 that.handlePreExtremePage(pageNum);
 },
 
 // 拉取指定页的码库数据
 appointPage: function(e){
 var page = e.target.dataset.curPage;
 this.curPage = page;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: page
 };
 this.getRequestFunc(formData);
 },
 
 // 拉取上一页码库数据
 goToPrePage: function(){
 var that = this;
 that.curPage = parseInt(that.curPage) - 1;
 if(that.curPage < 1){
 that.curPage = that.curPage + 1;
 //下面用的是一个模态框，可不写
 var promptText = '这已经是第一页了！';
 that.callPromptBox(promptText)
 }else{
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 拉取下一页码库数据
 goToNextPage: function(){
 var that = this;
 that.curPage = parseInt(that.curPage ) + 1;
 if(that.curPage > that.totalPage){
 that.curPage = that.curPage - 1;
 var promptText = '这已经是最后一页了！';
 that.callPromptBox(promptText)
 }else{
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 直接跳转到首页，即第一页
 goToIndexPage: function(){
 var that = this;
 if(that.curPage== 1){
 var promptText = '这已经是第一页了！';
 that.callPromptBox(promptText)
 }else{
 that.curPage= 1;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 直接跳转到尾页
 goToLastPage: function(){
 var that = this;
 if(that.curPage== that.totalPage){
 var promptText = '这已经是最后一页了！';
 that.callPromptBox(promptText)
 }else{
 that.curPage= that.totalPage;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 }, ​


好了，做完了，大家可复制代码去查看效果，数据可以自己写死，然后去测试。
当然了，我的代码肯定有瑕疵，所以大家在测试的时候，自己觉得有优化的地方可以去尝试优化下，让代码更精简，鲁棒性更强。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。