這篇文章主要介紹怎么使用vue實現(xiàn)分頁加載效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專注于企業(yè)成都全網營銷、網站重做改版、大柴旦網站定制設計、自適應品牌網站建設、H5場景定制、商城網站建設、集團公司官網建設、成都外貿網站制作、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為大柴旦等各大城市提供網站開發(fā)制作服務。

vue分頁加載的具體代碼如下

HTML

<!-- 商品 頁數(shù)-->
 <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>
 
 <!--限制加載數(shù)量-->
 <ul class="cata_choose_product clearfix">
 <!--渲染數(shù)據  從那個下標開始加載-->
 <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>&yen;{{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)生成頁數(shù)標簽-->
  <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:"",//頁面數(shù)據
 num:0,
 pages:1,//當前頁數(shù)
 priceQuery:false,//價格排序判斷
 Total:"",//總頁數(shù)（向上取整）
 initial:4,//默認加載數(shù)量
 total:"",//最終頁數(shù)
 }
 },
 created(){
 //獲取初始數(shù)據
 axios.get("'../../static/mock/data.json").then(res=>{
 this.Total = res.data.goods[0].foods.length;
 var arr = [];
 //限制獲取數(shù)據量
 for(var i=0;i<this.initial;i++){
 //加載數(shù)據  頁數(shù)+數(shù)量
 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(){
 //頁數(shù)++
 if(this.pages == this.total){
  this.pages = this.total;
 }else{
  this.pages++;
 }
 //從 加載數(shù)據 下標+數(shù)量
 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();
 },
 //刷新數(shù)據
 sua(){
 axios.get("'../../static/mock/data.json").then(res=>{
 var arr = [];
 //限制獲取數(shù)據量
 for(var i=0;i<this.initial;i++){
 //判斷數(shù)據是否有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);
 }); 
 },
 //頁數(shù)選擇
 yesu(e){
// console.log(e.target.id);
 this.num = (e.target.id)*4;
 this.pages = Number(e.target.id)+1;
 this.sua();
 },

以上是“怎么使用vue實現(xiàn)分頁加載效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網站欄目：怎么使用vue實現(xiàn)分頁加載效果-創(chuàng)新互聯(lián)
當前路徑：http://www.chinadenli.net/article4/dodsoe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、品牌網站建設、響應式網站、標簽優(yōu)化、微信小程序、網站排名

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)