移动端整屏滑动很卡，一点都不丝滑怎么办

bujiatang

1. <script setup lang="ts">
   
2. 
   
3. let Compoennt1 = {},
   
4.   Compoennt2 = {},
   
5.   Compoennt3 = {},
   
6.   Compoennt4 = {},
   
7.   Compoennt5 = {};
   
8. 
   
9. const onSlideChange = () => {
   
10.   const activeIndex = mySwiper.value.activeIndex;
    
11.   currIndex.value = activeIndex;
    
12. 
    
13.   if (activeIndex == 1) {
    
14.     Compoennt1 = defineAsyncComponent(() => import("../components/Compoennt1.vue"), true);
    
15.   }
    
16.   if (activeIndex == 2) {
    
17.     Compoennt2 = defineAsyncComponent(() => import("../components/Compoennt2.vue"));
    
18.   }
    
19.   if (activeIndex == 3) {
    
20.     Compoennt3 = defineAsyncComponent(() => import("../components/Compoennt3.vue"));
    
21.   }
    
22.   if (activeIndex == 4) {
    
23.     Compoennt4 = defineAsyncComponent(() => import("../components/Compoennt4.vue"));
    
24.   }
    
25.   if (activeIndex == 5) {
    
26.     Compoennt5 = defineAsyncComponent(() => import("../components/Compoennt5.vue"));
    
27.   }
    
28. };
    
29. 
    
30. </script>
    
31. 
    
32. <template>
    
33.   <swiper
    
34.       @swiper="onSwiper"
    
35.       autoHieght
    
36.       @slideChange="onSlideChange"
    
37.       class="home-swiper"
    
38.       direction="vertical"
    
39.       :speed="500"
    
40.       :touchRatio="2"
    
41.       :resistanceRatio="0.9"
    
42.     >
    
43.       <swiper-slide>
    
44.          <Component1 />
    
45.       </swiper-slide>
    
46.       <swiper-slide >
    
47.         <Component2 />
    
48.       </swiper-slide>
    
49.       <swiper-slide >
    
50.          <Component3 />
    
51.       </swiper-slide>
    
52.       <swiper-slide >
    
53.          <Component4 />
    
54.       </swiper-slide>
    
55.       <swiper-slide>
    
56.          <Compoennt5 />
    
57.       </swiper-slide>
    
58.     </swiper>
    
59. 
    
60. 
    
61. </template>
    
62. 
    
63. 
    

复制代码