<!-- 商品 頁數(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>¥{{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>

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();
 },