Swiper中文论坛

标题: 移动端整屏滑动很卡，一点都不丝滑怎么办 [打印本页]
作者: bujiatang    时间: 2023-9-7 14:43
标题: 移动端整屏滑动很卡，一点都不丝滑怎么办
  1. <script setup lang="ts">

  3. let Compoennt1 = {},
  4.   Compoennt2 = {},
  5.   Compoennt3 = {},
  6.   Compoennt4 = {},
  7.   Compoennt5 = {};

  9. const onSlideChange = () => {
  10.   const activeIndex = mySwiper.value.activeIndex;
  11.   currIndex.value = activeIndex;

  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. };

  30. </script>

  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>


  61. </template>


复制代码






欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2