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、结束