InfiniteScroll 无限滚动

滚动至底部时,加载更多数据。

<template>
  <ul  class="clearfix collectChecked"
       ref="collectChecked"
       v-infinite-scroll="load"
       style="overflow: auto"
       infinite-scroll-disabled="false"
       infinite-scroll-distance="20px">
    <li v-for="i in count" class="infinite-list-item">{
    { i }}li>
  ul>
template>

<script>
  export default {
      
    data () {
      
      return {
      
        count: 0
      }
    },
    
     this.$nextTick(() => {
      
      let scrolle: any = (this.$refs as any).collectChecked; // scroller的ref
      scrolle.scrollTo(0, 0, true);
    }), // 切换其他事件时调用,使之回到顶部
    
    methods: {
      
      load () {
      
        this.count += 2
      }
    }
  }
script>
<style lang="scss" scoped>
.collectChecked {
      
	height: 100%;
}
style>

你可能感兴趣的:(elementUI)