vue實現分頁加載效果

更新時間：2019年12月24日 14:09:47 作者：曳貓、

這篇文章主要為大家詳細介紹了vue實現分頁加載效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue分頁加載的具體代碼，供大家參考，具體內容如下

HTML

<!-- 商品 頁數-->
 <div class="pagenavi">
  <div class="all-number">
  <span>共{{data.length}}個商品</span>
  </div>
  <p class="pageArea" data-countpage="1">
  <span class="colf22e01 fontT">{{pages}}</span>
  /
  <span class="page_count fontT">{{total}}</span>
  </p>
 </div>
 <div class="clear-b"></div>
 </div>
 
 <!--限制加載數量-->
 <ul class="cata_choose_product clearfix">
 <!--渲染數據  從那個下標開始加載-->
 <li v-for="(value,index) in data" v-if="index < 5">
  <div class="nosinglemore"></div>
  <div class="listbox clearfix">
   <div class="listPic">
   <router-link target="_blank" to="/goods_detail">
    <img :src="value.image" class="fn_img_lazy">
   </router-link>
   </div>
  <div class="listDescript">
   <router-link target="_blank" to="/goods_detail" class="text13">{{value.name}}</router-link>
   </div>
  <div class="cat-shopprice lf">
  <p><span>¥{{value.price}}</span></p>
  </div>
   <div class="cat-addcart lf">
   <div class="cart_wrapper">
    <router-link target="_blank" to="/goods_detail">查看詳情</router-link>
   </div>
   </div>
   <div class="clear-b"></div>
  </div>
 </li>
 <div class="clear-b"></div>
 </ul>
 
 <!--分頁器-->
<div class="box">
 <div class="box_one">
  <div @click="shan">上一頁</div>
  <!--動態(tài)生成頁數標簽-->
  <div class="box_cen">
  <div v-for="(value,index) in total" class="box_foot">
  <span @click="yesu" :id="index">{{index+1}}</span>
  </div>
  </div>
  <div @click="xia">下一頁</div>
 </div>
</div>

js

data(){
 return{
 data:"",//頁面數據
 num:0,
 pages:1,//當前頁數
 priceQuery:false,//價格排序判斷
 Total:"",//總頁數（向上取整）
 initial:4,//默認加載數量
 total:"",//最終頁數
 }
 },
 created(){
 //獲取初始數據
 axios.get("'../../static/mock/data.json").then(res=>{
 this.Total = res.data.goods[0].foods.length;
 var arr = [];
 //限制獲取數據量
 for(var i=0;i<this.initial;i++){
 //加載數據  頁數+數量
 arr.push(res.data.goods[0].foods[this.num+i]);
 }
 this.data = arr;
 this.total = Math.ceil(this.Total/this.data.length);
 }).catch(err=>{
 console.log(err);
 }); 
 },
 methods:{
 //下一頁
 xia(){
 //頁數++
 if(this.pages == this.total){
  this.pages = this.total;
 }else{
  this.pages++;
 }
 //從 加載數據 下標+數量
 this.num = (this.pages-1)*this.initial;
 this.sua();
 },
 //上一頁
 shan(){
 if(this.pages == 1){
  this.pages = 1;
 }else{
  this.pages--;
 }
 this.num = (this.pages-1)*this.initial;
 this.sua();
 },
 //刷新數據
 sua(){
 axios.get("'../../static/mock/data.json").then(res=>{
 var arr = [];
 //限制獲取數據量
 for(var i=0;i<this.initial;i++){
 //判斷數據是否有undefined，有undefined會報錯無法加載
 if(res.data.goods[0].foods[this.num+i] != undefined) arr.push(res.data.goods[0].foods[this.num+i]);
 }
 this.data = arr;
 }).catch(err=>{
 console.log(err);
 }); 
 },
 //頁數選擇
 yesu(e){
// console.log(e.target.id);
 this.num = (e.target.id)*4;
 this.pages = Number(e.target.id)+1;
 this.sua();
 },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: