JingTieXueTang.H5/src/views/home/learn/page-learn.vue

<template>
  <div class="scroll">
    <div>
      <van-tabs :active="active" @click="tabChange">
        <van-tab
          v-for="(item, index) in learnModuleList"
          :key="index"
          :title="item.title"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in item.content" :key="item" :title="item" />
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "page-learn",
  components: {},
  data() {
    return {
      active: 0,
      learnModuleList: [
        { title: "推荐", code: "recommend", content: [] },
        { title: "实践", code: "practice", content: [] },
        { title: "百科", code: "encyclopedia", content: [] },
        { title: "推荐", code: "recommend", content: [] },
        { title: "实践", code: "practice", content: [] },
        { title: "百科", code: "encyclopedia", content: [] },
        { title: "推荐", code: "recommend", content: [] },
        { title: "实践", code: "practice", content: [] },
        { title: "百科", code: "encyclopedia", content: [] }
      ],
      choosedTabIndex: 0,
      choosedTabTitle: "推荐",
      loading: true,
      finished: false
    };
  },
  computed: {},
  created() {
    this.onLoad();
  },
  mounted() {},
  methods: {
    tabChange(index, title) {
      this.choosedTabIndex = index;
      this.choosedTabTitle = title;
      console.log("---index--" + index + "--title--" + title);
      this.initLoadStatus();
      this.onLoad();
    },
    initLoadStatus() {
      this.loading = true;
      this.finished = false;
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.learnModuleList[this.choosedTabIndex].content.push(
            this.choosedTabTitle + i
          );
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.learnModuleList[this.choosedTabIndex].content.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.contentBody {
  background-color: #fff;
}
</style>