uniProject/pages/newEnglish/components/mainCard.vue

<template>
 <swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
  @change="handleSwiperChange" :disable-touch="isPlaying">
  <swiper-item>
   <view class="swiper-item uni-bg-red">
    <xuePage :active-word="activeWord" :active-words="activeWords" @goXiangjie="goXiangjie"
     @play-audio="handlePlayAudio" :pageData="pageData"></xuePage>
   </view>
  </swiper-item>
  <swiper-item>
   <view class="swiper-item uni-bg-red">
    <pinPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
    </pinPageVue>
   </view>
  </swiper-item>
  <swiper-item>
   <view class="swiper-item uni-bg-blue">
    <readContent :active-word="activeWord" :pageData="pageData" @play-audio="handlePlayAudio"
     :active-words="activeWords"></readContent>
   </view>
  </swiper-item>
  <swiper-item>
   <view class="swiper-item uni-bg-blue">
    <selectPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
    </selectPageVue>
   </view>
  </swiper-item>
  <swiper-item>
   <view class="swiper-item uni-bg-blue">
    <beiPageVue :active-word="activeWord" :pageData="pageData" :active-words="activeWords"
     @play-audio="handlePlayAudio"></beiPageVue>
   </view>
  </swiper-item>
 </swiper>
</template>

<script setup>
 import pinPageVue from './pinPage.vue';
 import selectPageVue from './selectPage.vue';
 import beiPageVue from './beiPage.vue';
 import readContent from './readContent.vue';
 import xuePage from './xuePage.vue';
 import {
  ref
 } from 'vue';
 const props = defineProps({
  activeWord: {
   type: Object,
  },
  pageData: {
   type: Object,
  },
  activeWords: {
   type: Array
  },
  isPlaying: Boolean // 新增 isPlaying prop
 })
 const emits = defineEmits(['play-audio', 'goXiangjie', 'swiper-change'])

 function handleSwiperChange(e) {
  emits('swiper-change', e.detail.current)
 }

 function handlePlayAudio({
  url,
  code
 }) {
  emits('play-audio', {
   url,
   code
  })
 }

 function goXiangjie() {
  emits('goXiangjie')
 }
</script>

<style lang="scss" scoped>
</style>