vue功能之“分页器的滚动加载”

最新推荐文章于 2024-07-24 14:58:19 发布

空投在我怀里

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量2k

点赞数

分类专栏： vue功能文章标签： vue.js javascript 前端滚动分页

本文链接：https://blog.csdn.net/wrk2466836002/article/details/123507495

版权

vue功能专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、依赖安装与引入

1.安装 cnpm i vue-infinite-scroll --D

2.按需引入 import infiniteScroll from 'vue-infinite-scroll'

二、使用

1.样式

<div class="scroll-more"
            v-infinite-scroll="scrollMore"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="410"
            v-if="false"
          >
            <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
          </div>

2.代码

export default{
    name:'order-list',//orderList订单详情
   
    directives: {
      infiniteScroll
    },
    data(){
     return{
         loading:true,//是否显示懒加载组件
       pageNum:1,//能够自动识别-显示几列-
       busy:false,//默认不触发滚动
      
     }
    },
    mounted(){
      this.getOrderList()
    },
 methods:{
      scrollMore(){
        this.busy = true
        setTimeout(()=>{
          this.pageNum++
          this.getList()
        },500)
      },

       getList(){//专门给scrollMore使用
       this.loading = true
        this.$axios.get('/orders',
        {
          params:{
            pageSize:10,//默认是10条
            pageNum:this.pageNum
          }
        }).then((res)=>{
          this.list = this.list.concat(res.list)//数组累加
           this.loading = false

          if(res.hasNextPage){//接口里面是否存在下一页
            this.busy = false
          }else{
            this.busy = true
          }
        })
      },

    }
}