最近 使用vue-cli做移动端滚动加载的一些总结。

使用 vue-infinite-loading 做移动端的滚动加载

1.安装vue-infinite-loading  

     npm(cnpm) install  vue-infinite-loading  --save

2.项目里面引入：

ES6引入：

import InfiniteLoading from 'vue-infinite-loading';
export default {
  components: {
    InfiniteLoading,
  },
};

CommonJS 模块导入方式：

const InfiniteLoading = require('vue-infinite-loading');
export default {
  components: {
      InfiniteLoading,
  },
};

其他方式：

<script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>

开始使用：

 

template内容：

<div class="list">

    <div

      class="list_item"

      v-for="(item, index) in dataList"

      :key="index">

         {{dataList.name}}

   </div>

  <infinite-loading @infinite="getDatas">

      <span slot="no-more" style="color:#ccc">

         没有更多数据了。。。。

      </span>

  </infinite-loading>

</div>

 

script：

<script>

     import InfiniteLoading from 'vue-infinite-loading';

     

    export default {

　　components: {

　　　　InfiniteLoading,

　　},

　　data() {

　　　　return {

　　　　　　dataList: [],

　　　　　　pageNo: 1,

　　　　　　pageSize: 7

　　　　}

　　}, 

     

methods: {

     getDatas($state) {

       this.$http.get(url).then((data) => {

      　　const dataObj = data.data;

     　　if (dataObj.group_list.length) {

　　　　　　this.pageNo += 1;

　　　　　　this.dataList = this.dataList.concat(dataObj.group_list);

　　　　　　$state.loaded();

　　　　　　if (dataObj.group_list.length < this.pageSize) {

　　　　　　　　$state.complete();

　　　　　　}

　　　　} else {

　　　　　　$state.complete();

　　　　}

　　  });

     }

   }

  }