vue加載數據重複的問題

在寫vue滑動時遇到的問題<template>
    <div class="main">
         <!-- 評論頁面頭部 -->
         <div class="header">
                <i @click='back'  class="el-icon-back"></i>
                <input type="text" placeholder="請輸入搜索內容">
                <p class="title" @click="cli">管理</p>
         </div>
     
      
        <my-scroll class="scrolls" ref="myScroll" :on-pull="getList" :loaded="loaded" :scroll-state="scrollState">
                <div slot="scrollList">
                  <div class="list" v-for="(item,index) in listData" :key="index">
                      <!-- 收藏按鈕樣式 -->
                    <div class="input_check" v-show="dan">
                        <span class="ico_gou" 
                              :class="{'ico_gou_on':item.checked}"
                              @click="selectGoods(item)"></span>
                    </div>
                    <div class="goods_img"><img :src="item.picUrl" alt=""> </div>
                    <div class="goods_text">   
                        <p class="introduce" 
                           style="width:2rem;
                                  overflow: hidden;
                                  white-space: nowrap;
                                  text-overflow: ellipsis;">
                                  {{item.brief}}
                        </p>
                        <p class="people">{{item.people}}收藏</p>
                        <p class="pice">¥{{item.retailPrice}}</p>
                    </div>
                    <!-- 刪除單個收藏 -->
                    <div class="del_btn"
                         v-show="dan"
                         @click="remove(item.id)" 
                         style="margin-top: 0.6rem;font-size:0.2rem;">
                        <i class="el-icon-delete"></i>
                    </div>
                  </div>
                </div>
        </my-scroll>
    </div>
</template>


<script>
    import myScroll from "@/components/vue-scroll.vue";
    import axios from 'axios'
export default{
    data(){
        return{
            scrollState: true, // 是否能夠滑動
            loaded: false,//請求的開關
            iPage: 1,//默認顯示的第幾頁
            listData:[],//請求到的數據
            iPageSize: 4,//每頁顯示的數據
            appear:false,//管理狀態按鈕
            dan:false,//單個刪除的顯示狀態
        }
    },
    methods:{
        //返回上一級目錄
        back(){
           this.$router.go(-1)
        },
        //管理點擊顯示
        cli(){
            this.appear=!this.appear;
            this.dan=!this.dan;
        },
        //（單選）選擇商品
        selectGoods(item){
            console.log(111)
            if(typeof item.checked=='undefined'){
                this.$set(item,"checked",true);
            }else{
                item.checked=!item.checked;
            }
        },
        // 刪除單個訂單
        remove(id){
            // 添加樣式
            
            // this.collectionList.some((item,i)=>{
            //     if(item.id==id){
            //         this.collectionList.splice(i,1);
            //         return true;
            //     }
            // })
        },
      
        getList(){
       this.$refs.myScroll.setState(1)
       let _this = this

        let data=new FormData();
        data.append("type","0")
        data.append("limit",this.iPageSize)
        data.append("sort","add_time")
        data.append("order","desc")
        data.append("page",this.iPage)
        axios.post('http://192.168.0.14:8080/wx/collect/list',data).then(res=> {
          console.log(res) 
        //   debugger
            if (res.data.errno == 0 && res.data.data.list.length > 0 && !_this.loaded) {
               
              if (_this.iPage == 1) {
                _this.listData = res.data.data.list
              } else {
                _this.listData.push(...res.data.data.list)
              }
              _this.iPage++
              _this.$refs.myScroll.setState(2)
            } else
              if (_this.iPage == 1) {
                 {_this.czListData = []
              }
              _this.loaded = true
              _this.$refs.myScroll.setState(3)
            }   
          })
          .catch(function (error) {
            console.log(error);
          });
        }
    },
    mounted(){
        this.getList()
    },
    components: {
    myScroll
  }
}

</script>


<style scoped>
li{
    list-style: none;
}    
.main{
    padding-left: 0.12rem;
    padding-top: 0.1rem;
}
.header{
    padding: 0.15rem;
    top:0.1rem;
    padding-bottom: 0.3rem;
}
.header i{
    font-size: 0.26rem;
    font-weight: bold;
    float: left;
}
.header input{
    width: 70%;
    height: 0.34rem;
    border-radius: 0.3rem;
    border: none;
    padding-left: 0.36rem;
    background-color: #F5F6FA;
}
.title{
    float: right;
    font-size: 0.18rem;
    font-weight: bold;
}

/* 收藏商品 */
.goods_i{
    margin-top: 0.2rem;
    overflow: auto;
}
.goods_i .not{
    width:0.14rem;
    height:0.14rem;
    border-radius: 0.1rem;
    border:1px solid #ccc;
    float: left;
    margin-top: 0.4rem;
    margin-right: 0.1rem;
}
.goods_img{
    width:1rem;
    height:1.6rem;
}
.goods_img>img{
    width:100%;
}
.goods_i .goods_img{
    float: left;
}
.goods_i .goods_text{
    float: left;
    margin-left: 0.12rem;
}
.introduce{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 0.16rem;
    padding-bottom: 0.1rem;
    font-weight: bold;
}
.people{
    color:#A7A7A7;
    font-size: 0.08rem;
    padding-top: 0.36rem;
}
.pice{
    color:#D03515;
    font-size: 0.16rem;
    font-weight: bold;
    padding-top: 0.4rem;
}
/* 全選刪除按鈕 */
.delete{
    width:90%;
    height:0.4rem;
    padding-top: 0.04rem;
    padding-bottom: 0.02rem;
    padding-right: 0.1rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    position: relative;;
    /* bottom:0.2rem; */
    border-radius: 0.4rem;
    background-color: #ccc;
}
.delete .all{
    float: left;
    padding-top: 0.1rem;
    padding-left: 0.2rem;
}
.all_btn{
    width:0.2rem;
    height:0.2rem;
    float:left;
    /* display: inline-block; */
    border:1px solid #ccc;
    border-radius: 0.1rem;
    background-color: #fff;
}
.election{
    float: left;
    padding-left: 0.1rem;
}
.remove{
    float: right;
    color:#fff;
    text-align:center;
    width:0.8rem;
    height:0.38rem;
    line-height: 0.38rem;
    border-radius: 0.38rem;
    background: linear-gradient(to right,#FF91BF,#F74296);
}

.ico_gou{
    width: 0.2rem;
    height: 0.2rem;
    float: left;
    margin-top: 0.5rem;
    border:1px solid #ccc;
    border-radius: 0.1rem;
    background-color: #fff;
}
.ico_gou{
    background-color:#fff;
}
.ico_gou_on{
    background: url("../assets/image/checklist_icon.png");
    background-size:cover;
}
.list_i{
    width:1rem;
    height: 1rem;
    /* float: left; */
    display: inline-block;
}
.list .list_i>img{
    width:100%;
} 
</style>