VUE 下拉加载，无限循环--- infinite-loading

还在理解中，简单的先写一下。
思路：
1、安装插件 npm install vue-infinite-loading
2、引入插件 import InfiniteLoading from ‘vue-infinite-loading’
3、注册组件 components:{InfiniteLoading},
4、在结束v-for循环后，进行调用。

<li v-for="(item,uniquekey) in list" :key="uniquekey">
				<div class="img"><img v-lazy="item.thumbnail_pic_s"></div>
				<div class="fl" style="width:65%;">
					<div class="tit">{{item.title}}</div>
					<p>作者：{{item.author_name}}</p>
					<p>来源于：{{item.category}}-{{item.uniquekey}}</p>
				</div>
			</li>

		</ul>

<infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>

5、在data创建 函数

data(){
		return{
      page: 1, 
		      list: [],  //数据列表
		      newsType: 'story',
		      infiniteId: +new Date(),
		}
	},

6、业务逻辑直接上代码了，暂时还并不是很理解。正在寻求学习其他加载方式。像以下这种方式，无限循环加载重复的内容。

methods:{
 infiniteHandler($state) {
      this.$axios
      .get('../static/data/news.json', {
        params: {
          page: this.page,
          tags: this.newsType,
        },
      }).then(({ data }) => {
        if (data.result.data.length) {
          this.page += 1;
          this.list.push(...data.result.data);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    changeType() {
      this.page = 1;
      this.list = [];
      this.infiniteId += 1;
    },

7、结束