InfiniteScroll

无限滚动加载指令。

引入

import { InfiniteScroll } from 'we-vue'

Vue.use(InfiniteScroll)
1
2
3

例子

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

<div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
  <wv-group
    title="无限滚动加载"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="50"
  >
    <wv-cell title="条目" v-for="item in list" :key="item" :value="item"/>
  </wv-group>
  <p v-show="loading" class="loading-tips">
    <wv-spinner type="snake" color="#444" :size="24"/>
  </p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
  data () {
    return {
      list: [],
      loading: false,
      allLoaded: false,
      wrapperHeight: 0
    }
  },

  methods: {
    loadMore () {
      console.log('loading more')
      this.loading = true
      setTimeout(() => {
        let last = this.list[this.list.length - 1]
        for (let i = 1; i <= 5; i++) {
          this.list.push(last + i)
        }
        this.$nextTick(() => {
          this.loading = false
        })
      }, 2000)
    }
  },

  mounted () {
    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
    for (let i = 1; i <= 15; i++) {
      this.list.push(i)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

API

参数 类型 说明 可选值 默认值
infinite-scroll-disabled Boolean 是否禁用 false
infinite-scroll-distance Number 触发加载方法的滚动距离阈值(像素) 0
中国联通
20.45