Notebook-StarNet/aboutAETV.md

与星网项目相关

---

• TabList用法

<TabList v-model:value="activeTabName" :tabs="tabs"></TabList>

导入

import TabList from '@/components/tabList.vue'

---

• ScrollLoad用法

<ScrollLoad
  ref="scrollLoadRef"
  v-bind="scrollLoadProps"
  @fetchEnd="handleScrollDataFetchEnd">
  <!-- 这里直接使用elementplus的组件构建骨架屏 -->
  <template #skeleton>
    <el-skeleton
      :count="11"
      :throttle="500"
      animated
      class="result-skeleton">
      <template #template>
        <el-skeleton-item
          variant="rect"
          class="result-item-skeleton result-item"></el-skeleton-item>
      </template>
    </el-skeleton>
  </template>
  <!-- 这里为懒加载列表的内容，此处data未使用 -->
  <template #default={data}>
    <replayCard
      v-for="data of testData.testData"
      :key="data.title"
      :cardData="data"></replayCard>
  </template>
  <!-- 无数据时显示 -->
  <template #no-data>
    <RemindEmptyResource class="result-no-data"></RemindEmptyResource>
  </template>
</ScrollLoad>

其中scrollLoadProps的参数为如下

const scrollLoadProps = computed(() => {
  return {
    apiConf: api.something,
    matchData: '@data.items@',
    params: {}
  }
})

具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理