怎么使用vue實現(xiàn)分頁加載效果-創(chuàng)新互聯(lián)

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

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

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ù)據(jù)  從那個下標(biāo)開始加載-->
 <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ù)標(biāo)簽-->
  <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ù)據(jù)
 num:0,
 pages:1,//當(dāng)前頁數(shù)
 priceQuery:false,//價格排序判斷
 Total:"",//總頁數(shù)（向上取整）
 initial:4,//默認(rèn)加載數(shù)量
 total:"",//最終頁數(shù)
 }
 },
 created(){
 //獲取初始數(shù)據(jù)
 axios.get("'../../static/mock/data.json").then(res=>{
 this.Total = res.data.goods[0].foods.length;
 var arr = [];
 //限制獲取數(shù)據(jù)量
 for(var i=0;i<this.initial;i++){
 //加載數(shù)據(jù)  頁數(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ù)據(jù) 下標(biāo)+數(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ù)據(jù)
 sua(){
 axios.get("'../../static/mock/data.json").then(res=>{
 var arr = [];
 //限制獲取數(shù)據(jù)量
 for(var i=0;i<this.initial;i++){
 //判斷數(shù)據(jù)是否有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)分頁加載效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

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

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

廣告

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