查看: 921|回复: 0
打印 上一主题 下一主题

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

[复制链接]
  • TA的每日心情

    2024-1-4 15:08
  • 签到天数: 18 天

    [LV.4]偶尔看看III

    2

    主题

    22

    帖子

    159

    积分

    注册会员

    Rank: 2

    积分
    159
    跳转到指定楼层
    楼主
    发表于 2023-9-7 14:43:21 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    1. <script setup lang="ts">

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

    7. const onSlideChange = () => {
    8.   const activeIndex = mySwiper.value.activeIndex;
    9.   currIndex.value = activeIndex;

    10.   if (activeIndex == 1) {
    11.     Compoennt1 = defineAsyncComponent(() => import("../components/Compoennt1.vue"), true);
    12.   }
    13.   if (activeIndex == 2) {
    14.     Compoennt2 = defineAsyncComponent(() => import("../components/Compoennt2.vue"));
    15.   }
    16.   if (activeIndex == 3) {
    17.     Compoennt3 = defineAsyncComponent(() => import("../components/Compoennt3.vue"));
    18.   }
    19.   if (activeIndex == 4) {
    20.     Compoennt4 = defineAsyncComponent(() => import("../components/Compoennt4.vue"));
    21.   }
    22.   if (activeIndex == 5) {
    23.     Compoennt5 = defineAsyncComponent(() => import("../components/Compoennt5.vue"));
    24.   }
    25. };

    26. </script>

    27. <template>
    28.   <swiper
    29.       @swiper="onSwiper"
    30.       autoHieght
    31.       @slideChange="onSlideChange"
    32.       class="home-swiper"
    33.       direction="vertical"
    34.       :speed="500"
    35.       :touchRatio="2"
    36.       :resistanceRatio="0.9"
    37.     >
    38.       <swiper-slide>
    39.          <Component1 />
    40.       </swiper-slide>
    41.       <swiper-slide >
    42.         <Component2 />
    43.       </swiper-slide>
    44.       <swiper-slide >
    45.          <Component3 />
    46.       </swiper-slide>
    47.       <swiper-slide >
    48.          <Component4 />
    49.       </swiper-slide>
    50.       <swiper-slide>
    51.          <Compoennt5 />
    52.       </swiper-slide>
    53.     </swiper>


    54. </template>


    复制代码


    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 分享分享 分享淘帖
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-11-22 09:05 , Processed in 0.062019 second(s), 28 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表