JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/mint-ui/lib/index.js"></script>
<div id="app">
<template>
  <div class="container">
    <ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" >
      <li v-for="item in list" class="page-infinite-listitem">6{{ item }}</li>
    </ul>
    <p v-show="loading" class="page-infinite-loading">
      加载中...
    </p>
  </div>
</template>
</div>

SCSS

@import url("//unpkg.com/mint-ui/lib/style.css");

.container {
  height: 400px;
  border: solid 1px black;
  overflow: auto;
}

.page-infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.page-infinite-listitem {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.page-infinite-loading {
  margin: 0;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

Babel + JSX

var Main = {
    methods: {
      loadMore() {
        console.log('loading');
        this.loading = true;
        setTimeout(() => {
        	this.list.push(2);
          this.loading = false;
        }, 10);
      }
    },
    data() {
      return {
        list: [],
        loading: false,
        disabled: false
      }
    },
    mounted() {
      for (let i = 1; i <= 20; i++) {
        this.list.push(i);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')