日常开发

src/views/ranking/index.vue

@@ -27,7 +27,10 @@
         <div class="main" v-show="pageType == 1 ? true : false">
           <div class="swiperBox">
             <!--年级排名开始-->
-            <swiper ref="refSwiper" :slides-per-view="3" :slides-per-group="3" :space-between="10">
+            <swiper ref="refSwiper" :slides-per-view="3" :slides-per-group="3" :space-between="10" :modules="[Navigation]" :navigation="{
+                  prevEl: '.swiper-btn-left',
+                  nextEl: '.swiper-btn-right',
+                }">
               <swiper-slide v-for="(item, index) in gradeData" :key="index">
                 <div class="item">
                   <div class="gradeTitle">{{ item.label }}</div>
@@ -65,10 +68,10 @@
             </swiper>
             <!-- 如果需要导航按钮 -->
             <div class="swiper-button-prev swiper-btn swiper-btn-left" slot="button-prev" @click="getStopPlaying()"
-              v-if="gradeData.length > 3">
+              v-show="gradeData.length > 3">
             </div>
             <div class="swiper-button-next swiper-btn swiper-btn-right" slot="button-next" @click="getStopPlaying()"
-              v-if="gradeData.length > 3">
+              v-show="gradeData.length > 3">
             </div>
             <!--年级排名结束-->
           </div>
@@ -176,6 +179,7 @@
 
 <script setup name="Ranking" lang="ts">
 import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Navigation } from 'swiper/modules';
 import dataDictionary from "@/utils/dataDictionary"
 import 'dayjs/locale/zh-cn'
 import dayjs from 'dayjs'