ai_mooc_h5/src/pages/syxd/index.vue

<template>
  <div>
    <van-nav-bar title="声音采集" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <van-swipe ref="swipeRef" class="my-swipe" :autoplay="false" :duration="100" indicator-color="white" :show-indicators="false" :touchable="true" @change="handleChange">
      <van-swipe-item @click="handleNext(index)" v-for="(item, index) in imageList" :key="index"
        ><img class="w-full -mt-50px" :src="item" alt=""
      /></van-swipe-item>
    </van-swipe>
  </div>
</template>
<script setup>
import img1 from "~/assets/1.png";
import img2 from "~/assets/2.png";
import img3 from "~/assets/3.png";
import img4 from "~/assets/4.png";
import img5 from "~/assets/5.png";
import img6 from "~/assets/6.png";
let imageList = $ref([img1, img2, img3, img4, img5, img6]);
const router = useRouter()
function onClickLeft() {
  router.back()
}
const swipeRef = ref();
function handleNext(el){
 if(el!==5){
    swipeRef.value?.next();
 }else{
    router.push({ name: 'caiji-sy-read' })
 }
}
function handleChange(index){
 if(index===0){
    router.push({ name: 'caiji-sy-read' })
    // swipeRef.value?.swipeTo(5);
 }
}
</script>