mint-ui 在vue中使用 下拉加载

最终效果：

安装 Mint UI：

npm i mint-ui --save

main.js 中：

import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI)

infinitescroll.vue中全部内容：

<template>
  <div id="add">
    <h3>{{msg}}</h3>
    <!--上拉分页更多数据-->
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="list">
      <li v-for="item in list">{{ item.title }}</li>
    </ul>

    <p v-show="loading" class="page-infinite-loading">
      <mt-spinner type="fading-circle"></mt-spinner>
      加载中...
    </p>
  </div>

</template>

<script>
  export default {
    name: 'add',
    data() {
      return {
        msg: '下拉加载',
        list: [],
        j: 0,
        loading: false, //默认是false 可以滚动哦！
        page: 1

      }
    },
    methods: {
      loadMore() {
        this.requestData();
      },

      requestData() {
        //        this.loading=true; //请求数据的开关 禁用
        var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
        this.$http.get(url).then((response) => {

          //console.log(response);
          //加载的数据要存入的list中
          this.list = this.list.concat(response.data.result);

          ++this.page; //每次请求完成,页数加1

          //判断请求的是否有数据
          if(response.data.result.length < 20) {
            this.loading = true; //禁用请求
          } else {
            this.loading = false; //启用请求
          }

        }, (err) => {
          console.log(err)
        })
      }
    }
  }
</script>