<template>
  <div :class="$style['content-box']">
    <swiper
      :class="$style['swiper-box']"
      :vertical="true"
      :circular="false"
      @change="handleSwiperChange"
      @animationFinish="handleAnimationFinish"
    >
      <swiper-item 
        :item-id="item.id" 
        v-for="item in sliceList" 
        :key="item.id" 
        :class="$style['swiper-item']"
      >
        <div :style="{background:item.color}" :class="$style['item-block']">
          {{ item.id }}
          <p></p>
          当前是第几个：{{ item.index }}
        </div>
      </swiper-item>
    </swiper>
    <p :class="$style['bottom-tips']">数据加载中</p>
  </div>
</template>


<script setup>
import {ref,onMounted,computed} from "vue";
import {uuid} from "@/utils/util";


const swiperList = ref([]);
const startIndex = ref(0);
const endIndex = ref(2);
const sliceList = ref([]);
const isFetchLoading = ref(false);
onMounted(()=>{
  swiperList.value.push(...mockList());
  sliceList.value = swiperList.value.slice(startIndex.value,endIndex.value+1);
})
function handleSwiperChange($event){
}
function handleAnimationFinish($event){
  console.log($event,'$event')
  let {current,currentItemId} = $event.detail;
  let currentIndex = swiperList.value.findIndex((item)=>item.id == currentItemId);
  console.log(currentIndex,'修正')
  let diffAfter = swiperList.value.length - 1 - currentIndex;
  startIndex.value = currentIndex - 1<0?0:currentIndex - 1;
  endIndex.value = currentIndex+1<2?2:currentIndex+1;
  sliceList.value = swiperList.value.slice(startIndex.value,endIndex.value+1);
  console.log(startIndex.value,endIndex.value,'diffAfter',sliceList.value);
  // 当尾部数据小于1条的时候 从服务端请求数据
  if(diffAfter <= 1&&!isFetchLoading.value){
    isFetchLoading.value = true;
    setTimeout(()=>{
      swiperList.value.push(...mockList());
      isFetchLoading.value = false;
    },2000);
  }
}
// 模拟请求数据 3 012 345
function mockList(){
  let list = [];
  for(let i = 0;i<3;i++){
    list.push({
      id:uuid(),
      color:color16(),
      index:swiperList.value.length+i,
    })
  }
  return list;
}
// 随机生成颜色值
function color16(){
  let r = Math.floor(Math.random()*256);
  let g = Math.floor(Math.random()*256);
  let b = Math.floor(Math.random()*256);
  let color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
  return color;
}
</script>


<style module lang="scss">
.content-box{
  height: 100vh;
}
.swiper-box,.swiper-item,.swiper-item-box{
  height: 100%;
  position: relative;
}
.item-block{
  color: #fff;
  height: 100%;
  padding-top: 600px;
  box-sizing: border-box;
  text-align: center;
}
.bottom-tips{
  position: fixed;
  z-index: -1;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100px;
  line-height: 100px;
  background: rgb(73, 73, 196);
  text-align: center;
  color: #fff;
}
</style>
1:大概简单实现了一下视频上下滑动效果;
2:简单实现了滑动到尾部的时候加载更多数据;
3:简单实现了虚拟列表;