<template>
  <div class="book-video-list">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <template v-for="item in dataList" :key="item" style="height: 3rem;">
        <video-card :item="item"></video-card>
      </template>
    </van-list>
  </div>
</template>

<script setup>
import dataList from '@/mock/video_list'
import VideoCard from '@/components/VideoCard/index.vue'

import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

// 处理书籍下作品列表
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 100) {
      finished.value = true;
    }
  }, 1000);
};

  onMounted(() => {
    
  })
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>

</style>