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

swiper没有渲染出来

[复制链接]
  • TA的每日心情
    慵懒
    2021-9-1 17:23
  • 签到天数: 2 天

    [LV.1]初来乍到

    2

    主题

    6

    帖子

    33

    积分

    新手上路

    Rank: 1

    积分
    33
    跳转到指定楼层
    楼主
    发表于 2021-9-1 17:20:29 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    本帖最后由 白日梦想家2 于 2021-9-1 17:21 编辑

    有很大的机滤重新刷新页面后,swiper没有渲染出来
    "swiper": "^5.3.6",
        "vue": "^2.5.2",
        "vue-awesome-swiper": "^4.1.1",


                        <swiper ref="about_swiper" :options="swiperOption"  @slideChange="slideChange">
                            <swiper-slide class="swiper-slide" v-for="(item,index) in carouselArr" :key="index">
                                <img :src="item.url"/>

                            </swiper-slide>
                        </swiper>




                swiperOption:{
                    centeredSlides: true,
                    speed:2500,
                    loop: true,
                    slidesPerView: 4,
                    // spaceBetween: 40,
                    //自动轮播
                    autoplay: {
                        delay: 1,
                    },
                },




                carouselArr:[
                    {
                        url:require('@/common/images/about/1 (1).jpg'),
                    },
                    {
                        url:require('@/common/images/about/1 (2).jpg'),
                    },
                    {
                        url:require('@/common/images/about/1 (3).jpg'),
                    },

                    {
                        url:require('@/common/images/about/1 (5).jpg'),
                    },
                    {
                        url:require('@/common/images/about/1 (6).jpg'),
                    },
                    {
                        url:require('@/common/images/about/1 (7).jpg'),
                    },
                    {
                        url:require('@/common/images/about/1 (8).jpg'),
                    },
                    {
                        url:require('@/common/images/about/1 (9).jpg'),
                    },
                    {
                        url:require('@/common/images/about/1 (10).jpg'),
                    },
                    {
                        url:require('@/common/images/about/1 (11).jpg'),
                    },
                ],






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

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2024-11-22 02:29 , Processed in 0.058206 second(s), 28 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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