快捷導(dǎo)航

vue實(shí)現(xiàn)前端分頁(yè)完整代碼

更新時(shí)間：2020年06月17日 08:44:51 作者：最愛松露巧克力

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)前端分頁(yè)完整代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)前端分頁(yè)的具體代碼，供大家參考，具體內(nèi)容如下

首先，做出來的效果如圖所示，具體的Ajax請(qǐng)求數(shù)據(jù)可以寫在點(diǎn)擊函數(shù)中
分頁(yè)效果算是比較費(fèi)腦子的，里面計(jì)算有些麻煩，本文上完整代碼，一起學(xué)習(xí)進(jìn)步

“上一頁(yè)”寫兩個(gè)li元素，如果已經(jīng)是第一頁(yè)，那么就禁止鼠標(biāo)點(diǎn)擊，如果不是就curr減減，并且可以點(diǎn)擊
同理“下一頁(yè)”也一樣
中間部分是通過indexs循環(huán)，indexs通過computed計(jì)算得出

<div class="page-bar">
  <ul>
    <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一頁(yè)</a></li>
    <li v-if="cur==1"><a class="banclick">上一頁(yè)</a></li>
    <!--當(dāng)前頁(yè)背景色為藍(lán)色-->
    <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
      <a v-on:click="btnClick(index)">{{ index }}</a>
    </li>
    <li v-if="cur<all"><a v-on:click="cur++,pageClick()">下一頁(yè)</a></li>
    <li v-if="cur == all"><a class="banclick">下一頁(yè)</a></li>
    <li><a>共<i>{{all}}</i>頁(yè)</a></li>
  </ul>
</div>

難點(diǎn)就是IF嵌套語(yǔ)句

1、每次顯示5個(gè)數(shù)據(jù)，如果大于3，范圍從3到6，如果到達(dá)7，那么下邊加2變成9，已經(jīng)超過最大的范圍值，所以最大范圍到6
2、如果是大于6，那么最大值就是最大值，最小變成all-4
3、如果3以內(nèi)，默認(rèn)不跳動(dòng)

var pageBar = new Vue({
  el: '.page-bar',
  data: {
    all: 8, //總頁(yè)數(shù)
    cur: 1//當(dāng)前頁(yè)碼
  },
  watch: {
    cur: function(oldValue , newValue){
      console.log(arguments);
    }
  },  
   methods: {
    btnClick: function(data){
      if(data != this.cur){
        this.cur = data;
      }
    },
    pageClick: function(){
      console.log('現(xiàn)在在'+this.cur+'頁(yè)');
    }
  },
  computed: {
    indexs: function(){
     var left = 1;
     var right = this.all;
     var ar = [];
     if(this.all>= 5){
      //這里最大范圍從3到6，如果到達(dá)7，那么下邊加2變成9，已經(jīng)超過最大的范圍值
      if(this.cur > 3 && this.cur < this.all-1){
       //以4為參考基準(zhǔn)，左面加2右邊加2
          left = this.cur - 2
          right = this.cur + 2
      }else{
        if(this.cur<=3){
          left = 1
          right = 5
        }else{
          right = this.all
          left = this.all -4
        }
      }
     }
    while (left <= right){
      ar.push(left)
      left ++
    }
    console.log(ar);
    return ar
    }
  }
})

全部代碼：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="js/vue.min.js"></script>
<style>
.page-bar{
  margin:40px;
}
ul,li{
  margin: 0px;
  padding: 0px;
}
li{
  list-style: none
}
.page-bar li:first-child>a {
  margin-left: 0px
}
.page-bar a{
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  cursor: pointer
}
.page-bar a:hover{
  background-color: #eee;
}
.page-bar a.banclick{
  cursor:not-allowed;
}
.page-bar .active a{
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.page-bar i{
  font-style:normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}
</style>
</head>
<body>
 <div class="page-bar">
  <ul>
    <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一頁(yè)</a></li>
    <li v-if="cur==1"><a class="banclick">上一頁(yè)</a></li>
    <!--當(dāng)前頁(yè)背景色為藍(lán)色-->
    <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
      <a v-on:click="btnClick(index)">{{ index }}</a>
    </li>
    <li v-if="cur<all"><a v-on:click="cur++,pageClick()">下一頁(yè)</a></li>
    <li v-if="cur == all"><a class="banclick">下一頁(yè)</a></li>
    <li><a>共<i>{{all}}</i>頁(yè)</a></li>
  </ul>
</div>
<script type="text/javascript">
var pageBar = new Vue({
  el: '.page-bar',
  data: {
    all: 8, //總頁(yè)數(shù)
    cur: 1//當(dāng)前頁(yè)碼
  },
  watch: {
    cur: function(oldValue , newValue){
      console.log(arguments);
    }
  },  
   methods: {
    btnClick: function(data){
      if(data != this.cur){
        this.cur = data;
      }
    },
    pageClick: function(){
      console.log('現(xiàn)在在'+this.cur+'頁(yè)');
    }
  },
  computed: {
    indexs: function(){
     var left = 1;
     var right = this.all;
     var ar = [];
     if(this.all>= 5){
      //這里最大范圍從3到6，如果到達(dá)7，那么下邊加2變成9，已經(jīng)超過最大的范圍值
      if(this.cur > 3 && this.cur < this.all-1){
       //以4為參考基準(zhǔn)，左面加2右邊加2
          left = this.cur - 2
          right = this.cur + 2
      }else{
        if(this.cur<=3){
          left = 1
          right = 5
        }else{
          right = this.all
          left = this.all -4
        }
      }
     }
    while (left <= right){
      ar.push(left)
      left ++
    }
    console.log(ar);
    return ar
    }
  }
})
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: