051_InfiniteScroll无限滚动

1. InfiniteScroll无限滚动

1.1. InfiniteScroll无限滚动滚动至底部时, 加载更多数据。

1.2. Attributes

参数	说明	类型	默认值
infinite-scroll-disabled	是否禁用	boolean	false
infinite-scroll-delay	节流时延, 单位为ms	number	200
infinite-scroll-distance	触发加载的距离阈值, 单位为px	number	0
infinite-scroll-immediate	是否立即执行加载方法, 以防初始状态下内容无法撑满容器。	boolean	true

2. InfiniteScroll无限滚动例子

2.1. 使用脚手架新建一个名为element-ui-infinitescroll折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import InfiniteScroll from '../components/InfiniteScroll.vue'
import DisabledInfiniteScroll from '../components/DisabledInfiniteScroll.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/InfiniteScroll' },
  { path: '/InfiniteScroll', component: InfiniteScroll },
  { path: '/DisabledInfiniteScroll', component: DisabledInfiniteScroll }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建InfiniteScroll.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>在要实现滚动加载的列表上上添加v-infinite-scroll, 并赋值相应的加载方法, 可实现滚动到底部时自动执行加载方法。</h4>
    <div class="content">
      <ul class="infinite-list" v-infinite-scroll="load" style="overflow: auto;">
        <li v-for="i in count" class="infinite-list-item" :key="i">{{ i }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    load () {
      this.count += 2
    }
  }
}
</script>

<style scoped>
  .content {
    width: 800px;
    height: 500px;
    overflow: auto;
    text-align: center;
  }
  .content .infinite-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .infinite-list .infinite-list-item {
    width: 100%;
    height: 50px;
    background-color: #67C23A;
  }
  .infinite-list-item + .infinite-list-item {
    margin-top: 20px;
  }
</style>

2.4. 在components下创建DisabledInfiniteScroll.vue

<template>
  <div>
    <h1>禁用加载</h1>
    <div class="content" style="overflow: auto;">
      <ul class="infinite-list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
        <li v-for="i in count" class="infinite-list-item" :key="i">{{ i }}</li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>

<style scoped>
  .content {
    width: 800px;
    height: 500px;
    overflow: auto;
    text-align: center;
  }
  .content .infinite-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .infinite-list .infinite-list-item {
    width: 100%;
    height: 50px;
    background-color: #FFE5E5;
  }
  .infinite-list-item + .infinite-list-item {
    margin-top: 20px;
  }
</style>

<script>
export default {
  data () {
    return {
      count: 10,
      loading: false
    }
  },
  computed: {
    noMore () {
      return this.count >= 20
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    load () {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 2000)
    }
  }
}
</script>

2.5. 运行项目, 访问http://localhost:8080/#/InfiniteScroll

2.6. 运行项目, 访问http://localhost:8080/#/DisabledInfiniteScroll