vue 计算屏幕的高度_一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解...

f629a09a41f44276825719e589a14e5b

开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现。接下来我们一起看下它的配置及使用方式。

首先我们先了解下他的配置参数:

  • v-infinite-scroll="loadMore"表示回调函数是loadMore
  • infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore,false则执行loadMore,true则不执行,注意,busy表示繁忙,繁忙的时候是不执行的。
  • infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数,10是像素值。一般情况下会在页尾做一个几十像素高的“正在加载中...”,这样的话,可以把这个div的高度设为infinite-scroll-distance的值即可。
  • infinite-scroll-immediate-check 默认值为true,该指令表示,应该在绑定后立即检查busy的值和是否滚动到底。假如你的初始内容高度不够,不足以填满可滚动的容器的话,你应设为true,这样会立即执行一次loadMore,会帮你填充一些初始内容。
  • infinite-scroll-listen-for-event 当事件在Vue实例中发出时,无限滚动将再次检查。
  • infinite-scroll-throttle-delay 检查busy的值的时间间隔,默认值是200,因为vue-infinite-scroll的基础原理是,vue-infinite-scroll会循环检查busy的值,以及是否滚动到底,只有当:busy为false且滚动到底,回调函数才会执行

安装vue-infinite-scroll

npm install vue-infinite-scroll --save

在Vue项目中引入 vue-infinite-scroll

你可以选择全局引入:

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

或者在单个组件中使用:

import infiniteScroll from 'vue-infinite-scroll'export default {directives: { infiniteScroll }}

在实际开发组件中的调用

54eff70830684a389504dbe0c4d78072

js部分:

f33ef70502124f459f4a76004eb1e2c2

为了便于测试可以使用官网案例进行演示:

{{item.name}}
data () { return { count: 0, data: [], busy: false } },methods: { loadMore: function() { this.busy = true setTimeout(() => { for (var i = 0, j = 10; i < j; i++) { this.data.push({name: this.count++ }) } console.log(this.data) this.busy = false }, 1000) } }

注意:

  • 如果要用数据对容器进行填充,那么必须设置容器高度 也可以是屏幕高度,不然无法触发loadMore事件
  • 在进行异步请求之前,需要调用this.busy= true, 数据请求完成后 再设置 this.busy = false(放在axios请求的外面,避免不断重复加载的现象)
c9b008fff88b4489a27083f4a5a200fa
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值