功能6 -- 选项卡数据缓存

保存选择tab不刷新原数据,通过大的数组包住[{data:[],page:0},{data,page},{data,page}],page判断是否重置数据

html

<div id="app">
 <nav class="nav-block">
     <div @click="showMe(1)">tab1</div>
     <div @click="showMe(2)">tab2</div>
     <div @click="showMe(3)">tab3</div>
 </nav>
 <div>
     <div v-if='showLoading'>加载中。。。</div>
     <div class="main" v-for="(item,index) in showData" :key="item.id">
        <div v-if="index == (number-1)">
            <div v-for="itemSon in item.data" :key="itemSon.id">{{itemSon.name}}</div>
        </div>
     </div>
     <div @click="freshMe">
         点击我默认刷新单前tab
     </div>
 </div>
</div>

vue/js

let app = new Vue({
  el: '#app',
  data() {
    return {
      showLoading: true,
      number: 0,
      data1: [
          {id: 1, name: '数据1', dec: '...'},
          {id: 2, name: '数据1', dec: '...'},
      ],
      data2: [
          {id: 1, name: '数据2', dec: '...'},
          {id: 2, name: '数据2', dec: '...'},
      ],
      data3: [
          {id: 1, name: '数据3', dec: '...'},
          {id: 2, name: '数据3', dec: '...'},
      ],
      showData: [
        {
            data: [],
            page: 0,
        },
        {
            data: [],
            page: 0,
        },
        {
            data: [],
            page: 0,
        },
      ]
    }
  }, 
  mounted() {
      this.getData(1)
  },
  methods: {
      freshMe() {      // 上拉刷新
            this.showData[this.number - 1]['page'] = 0;                  // 重置单前tab的page
            this.getData(this.number)
      },
      showMe(status) {
        console.log(status)
        this.getData(status)
      },
      getData(number) {
          this.showLoading = true;
          this.number = number
          let newData = [];
          setTimeout(()=>{      // 模拟后端接口
            newData = this['data' + number]
            this.showData[number - 1]['page'] = this.showData[number - 1]['page'] + 1;
            if( this.showData[number - 1]['page']>1) {      // page>1,就是下拉加载
                this.showData[number - 1]['data'] = this.showData[number - 1]['data'].concat(newData);
            } else {      // 第一次数据请求或上拉刷新
                this.showData[number - 1]['data'] = newData;
            }

            this.showLoading = false;

            console.log('每个tab的数据')
            console.log(JSON.stringify(this.showData[0]))
            console.log(JSON.stringify(this.showData[1]))
            console.log(JSON.stringify(this.showData[2]))
          },2000)
         
      }
  }
});

css

.nav-block {
    display: flex;
    justify-content: space-around;
    background: #fff;
}
.main div {
    padding: 10px 0;
}

环境：http://jsrun.net/new （左边引入vuejs:https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js）