列表页面的展开以及收起

需求

由于公司新需求 ，写一个列表页 ，不上拉加载 ，点击加载更多去加载 还会有收起按钮 。大概效果如下图所示：

想法

1，一开始想的是直接对数组进行切割 。然后每次点击加载更多重新加载 。但是这样之前加载的 又会重新加载一遍 。
2，最终决定 采用 将 之前的数据 保存下来 每次点击更多的时候 先回到原来的数据 。

好了 废话不多说了 上代码

关键代码

template部分

<template>
  <div class="list">
      <div class="title">列表的展开以及收起</div>
      <div class="list">
          <div v-for="(item,index) in showList" :key="index" class="box">
              <div>{{item.title}}{{index+1}}</div>
              <div>{{item.type}}</div>
          </div>
      </div> 
      <div class="load-more" @click="getList">
          <div>加载更多</div>
          <div class="put-on" @click.stop="putOn" v-show="showList.length>2">收起</div>
      </div>
      
  </div>
</template>

js部分

export default {
    name:'collspan' ,
    data(){
        return{
            resList:[] ,//接口获取的数组
            showList:[] ,//展示的数组
            showAll:true ,//展示全部？
        }
    } ,
    methods:{
        getList(){
            if(!this.showAll){
                this.showAll = true ;
                this.showList = this.resList ;
                return ;
            }
            let obj = {
            'title': '标题',
            'type': '内容'
            };
            console.log('调借口');
            this.resList.push(obj) ;
            this.resList.push(obj) ;
            this.showList = this.resList;
        },
        // 收起
        putOn(){
            //  切割数组 。 
            this.showList= this.showList.slice(0,2) ;
            this.showAll = false ;
        }
    },
    created(){
        this.getList(true) ;
    }
}
</script>

css部分

<style scoped>
.title{
    font-weight: 600;
    padding: 15px;
}
.list{
    background-color: #efefef;
     font-size: 15px;
}
.box{
    padding: 15px;
    background-color: #fff;
    color: #333;
    border-bottom: 1px solid #eeeeee;
}
.load-more{
    text-align: center;
    padding: 10px;
    position: relative;
}
.put-on{
    position: absolute;
    right: 15px;
    bottom: 10px;
    color: red;
}
</style>

结尾

希望能够好使吧 ，明日继续 ！！！