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

一、依赖安装与引入

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

    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值