vue-infinite-scroll 与 多次调用loading遇到的坑

vue-infinite-scroll 与 多次调用loading遇到的坑

遇到的问题

在用 开发移动端商城过程中,运用mint-ui 框架的 无限滚动加载Infinite scroll 和 keep-alive 缓存 ,在从列表页跳到详情页的时候 一直触发loading 无限加载数据。

解决方案

从列表页跳到详情页用编程式导航,并且跳页时把loading 改为 true,禁止触发加载函数,从详情页返回列表页时要用
back(){
this.$router.go(-1)
}

反回时 要 在 activated 钩子函数中 把loading 改回false。
// keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

         

           

               
               {{hot.goods_name}} 
           
           
￥{{hot.shop_price}}
           

              赠送{{hot.back_midou}}米豆
           
         
      
     
     
  import {Indicator} from 'mint-ui' 
  import { InfiniteScroll } from 'mint-ui';
  import Vue from 'vue'
  Vue.use(InfiniteScroll);
  import { Tabbar, TabItem } from 'mint-ui';
  Vue.component(Tabbar.name, Tabbar);
  Vue.component(TabItem.name, TabItem);


 export default {
   name:'Home',
   data(){
    return {
      lunbo:[],
      hotList:[],
      p:2,
      totalPages:'',
      loading:false,
      check:true
      
    }
  },
   created(){
        this.$axios({
            url:'api/applet/Index/index',
            }).then((res)=>{
               this.lunbo = res.data.data.banner;
               console.log(res)
            }).catch((err)=>{
            	console.log(err)
            })
       
     
       this.$axios.get('api/applet/Index/ajaxGetMore?p=1')
       .then((res)=>{
           this.hotList = res.data.data.favourite_goods;
           this.totalPages= res.data.data.pages.totalPages;

        }).catch((err)=>{

        })

 
 },
 activated(){
 this.loading=false; // keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
},
 //跳到公告列表
togonggaoList(){
  this.loading=true;
  this.$router.push({
    name:'gonggaoList'
  })
}

总结

第一次写博客，本人也是刚学习vue，如果有写的不对地方请指出来，大家多交流，或者有更好的解决方法欢迎大家留言