切换调整

pages/newEnglish/components/mainCard.vue

@@ -1,6 +1,6 @@
 <template>
-  <selectTypesVue :activeSelect="currentIndex"></selectTypesVue>
-	<swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
+	<selectTypesVue :activeSelect="currentIndex" @change="onChange"></selectTypesVue>
+	<swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false" :current="+currentIndex-1"
 		@change="handleSwiperChange" :disable-touch="isPlaying">
 		<swiper-item>
 			<view class="swiper-item uni-bg-red">
@@ -40,7 +40,7 @@
 		</view>
 	</uni-popup>
 
-  <audioRightWrongVue></audioRightWrongVue>
+	<audioRightWrongVue></audioRightWrongVue>
 </template>
 
 <script setup>
@@ -49,13 +49,13 @@
 	import beiPageVue from './beiPage.vue';
 	import readContent from './readContent.vue';
 	import xuePage from './xuePage.vue';
-  import audioRightWrongVue from "../components/audioRightWrong.vue";
-  import selectTypesVue from './selectTypes.vue';
-	import {
-		ref,
-		onMounted,
-		onUnmounted
-	} from 'vue';
+	import audioRightWrongVue from "../components/audioRightWrong.vue";
+	import selectTypesVue from './selectTypes.vue';
+  import {
+    ref,
+    onMounted,
+    onUnmounted, nextTick
+  } from 'vue';
 	const props = defineProps({
 		activeWord: {
 			type: Object,
@@ -72,7 +72,8 @@
 	const popupImage = ref('')
 	const statusAudio = uni.createInnerAudioContext()
 	const emits = defineEmits(['play-audio', 'goXiangjie', 'swiper-change'])
-  const currentIndex = ref(1)
+	const currentIndex = ref(0)
+  const mySwiperRef = ref(null);
 
 
 	const luyinSuccess = (imagePath, text, audioPath) => {
@@ -94,7 +95,12 @@
 
 	function handleSwiperChange(e) {
 		emits('swiper-change', e.detail.current)
-    currentIndex.value = e.detail.current+1;
+		currentIndex.value = e.detail.current + 1;
+	}
+
+	function onChange(code) {
+    console.log('code',code)
+    currentIndex.value = (code + 1)
 	}
 
 	function handlePlayAudio({

pages/newEnglish/components/selectTypes.vue

@@ -1,24 +1,30 @@
 <template>
 	<view class="select-types-box">
-		<view class="types-item" :class="{active: activeSelect == 1}">学</view>
+		<view class="types-item" :class="{active: activeSelect == 1}" @click="handleClick(0)">学</view>
 		<icon class="jt-item" :class="{active: activeSelect == 1}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 2}">拼</view>
+		<view class="types-item" :class="{active: activeSelect == 2}" @click="handleClick(1)">拼</view>
 		<icon class="jt-item" :class="{active: activeSelect == 2}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 3}">读</view>
+		<view class="types-item" :class="{active: activeSelect == 3}" @click="handleClick(2)">读</view>
 		<icon class="jt-item" :class="{active: activeSelect == 3}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 4}">选</view>
+		<view class="types-item" :class="{active: activeSelect == 4}" @click="handleClick(3)">选</view>
 		<icon class="jt-item" :class="{active: activeSelect == 4}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 5}">背</view>
+		<view class="types-item" :class="{active: activeSelect == 5}" @click="handleClick(4)">背</view>
 	</view>
 </template>
 
 <script setup>
 	defineProps({
 		activeSelect: {
-			type: String,
+			type: [String,Number],
 			required: true
 		}
 	})
+	
+	const emits = defineEmits(['change'])
+	
+	function handleClick(code) {
+		emits('change',code)
+	}
 </script>
 
 <style lang="scss" scoped>