4.0.0 • Published 4 years ago

@huteming/ui-infinite-scroll v4.0.0

Weekly downloads
2
License
ISC
Repository
-
Last release
4 years ago

无限滚动指令。


引入

import { InfiniteScroll } from '@huteming/ui'

Vue.use(InfiniteScroll)
// Vue.directive(InfiniteScroll.name, InfiniteScroll)

例子

为 HTML 元素添加 v-infinite-scroll 指令即可使用无限滚动。滚动该元素,当其底部与被滚动元素底部的距离小于给定的阈值时,绑定到 v-infinite-scroll 指令的方法就会被触发。

<ul v-infinite-scroll="loadMore">
    <li v-for="item in list">{{ item }}</li>
</ul>
loadMore (done) {
    setTimeout(() => {
        let last = this.list[this.list.length - 1]

        for (let i = 1; i <= 10; i++) {
            this.list.push(last + i)
        }

        done()
    }, 2500)
}

API

参数说明类型可选值默认值
callback触发的回调函数。指令参数是function类型时,作为callbackFunction(done)
distance触发加载方法的滚动距离阈值(像素))Number50
disabled若为真,则无限滚动不会被触发Booleanfalse

修饰符

参数说明默认值
immediate若为真,则指令被绑定到元素上后会立即检查是否需要执行加载方法。在初始状态下内容有可能撑不满容器时十分有用false

监听事件

事件名称说明示例
infinite-scroll一个 event,被执行时会立即检查是否需要执行加载方法this.$emit('infinite-scroll')