当前位置:   article > 正文

使用vue-infinite-scroll实现无限滚动_v-infinite-scroll="loadmore" infinite-scroll-disab

v-infinite-scroll="loadmore" infinite-scroll-disabled="loading" :infinite-sc

今天在移动端项目中遇见一个需求,需要数据无限滚动。在这里总结一下使用心得

首先引入:

 npm install vue-infinite-scroll --save  

在vue中的main.js中引入:

  1. import infiniteScroll from 'vue-infinite-scroll'
  2. Vue.use(infiniteScroll)

 

在代码中使用:

  1. <template>
  2. <section>
  3. <div class="wrap"
  4. v-infinite-scroll="loadMore"
  5. :infinite-scroll-disabled="loading"
  6. infinite-scroll-distance="20"
  7. >
  8. <div v-for="(item, index) in list" :key="index" class="div">
  9. <li>{
  10. {item.text}}</li>
  11. </div>
  12. </div>
  13. <section v-show="loadingTip">
  14. <span>加载中···</span>
  15. &l
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小惠珠哦/article/detail/982891
推荐阅读
相关标签
  

闽ICP备14008679号