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

最新推荐文章于 2025-06-17 19:52:06 发布

原创

最新推荐文章于 2025-06-17 19:52:06 发布 · 置顶 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-infinite-scroll #mint-ui

在使用Vue的mint-ui框架开发移动端商城时，结合Infinite Scroll和keep-alive缓存，遇到了从列表页跳转详情页时持续触发加载数据的问题。解决方案是通过编程式导航并控制loading状态，确保在详情页返回时，在activated钩子中恢复loading为false，避免无限加载。这是作者初次撰写的技术博客，期待交流和分享更好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

遇到的问题

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

解决方案

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

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

<div class="hotList"  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" 
      :infinite-scroll-immediate-check="true" >
         <div class="hot-item" v-for="(hot,index) in hotList" :key="index">
           <div class="hot-a" @click="togonggaoList">
               <img v-lazy="hot.goods_img[0]">
               <span>{
  
  {hot.goods_name}} </span>
           </div>
           <p class="price">￥{
  
  {hot.sho