swiper插件在vue中无法初始化？

Question

THANKS FOR YOUR TIME!

父组件

<!--两个tab 用来控制swiper-->
<li class="tab-item" v-for="(item,index) in processItems" @click="tabProcess(index)"
    :class="{active: processTabActiveIndex === index}">
    <span>{{item.title}}</span>
</li>


<div class="swiper-wrapper" v-show="processTabActiveIndex === 0">
    <Swiper :infoOfInitSwiper="infoOfInitSwiperOfProcessLeft" ref="swiperOfProcessLeft"></Swiper>
</div>
<div class="swiper-wrapper" v-show="processTabActiveIndex === 1">
    <Swiper :infoOfInitSwiper="infoOfInitSwiperOfProcessRight" ref="swiperOfProcessRight"></Swiper>
</div>



//                买车流程 swiper初始化
infoOfInitSwiperOfProcessLeft: {
    id: 'swiperOfProcessLeft',

    width: '100%',
    height: '600px',
    paginationShow: false,
    autoPlay: false,

    swiperImgUrl: [
        '/static/images/process/select.png',
        '/static/images/process/communication.png',
        '/static/images/process/check.png',
        '/static/images/process/sign_bargin.png'
    ]
},

//                卖车流程 swiper初始化
infoOfInitSwiperOfProcessRight: {
    id: 'swiperOfProcessRight',

    width: '100%',
    height: '600px',
    paginationShow: false,
    autoPlay: false,


    swiperImgUrl: [
        '/static/images/process/quick_application.png',
        '/static/images/process/check.png',
        '/static/images/process/pay.png',
        '/static/images/process/bargin_complete.png',
    ]
},




//            process tab 切换
tabProcess: function (index) {
    this.processTabActiveIndex = index;

    if (index === 0) {
        this.$refs.swiperOfProcessLeft.refresh();
    }
    if (index === 1) {
        this.$refs.swiperOfProcessRight.refresh();
    }
},

components: {
    'Swiper': SwiperComponent,
    'Blue': BlueTitleBlock,
    'Footer': Footer
}

swiper组件

<template>
    <div :id="infoOfInitSwiper.id" class="swiper-container" :style="createContainerStyle">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(imgUrl, index) in infoOfInitSwiper.swiperImgUrl" :style="createBackground(imgUrl)"></div>
        </div>


        <!--prop传过来的boolean值似乎会失效-->
        <div class="swiper-pagination" v-if="paginationShow"></div>
    </div>

</template>

<script type="text/ecmascript-6">
    export default{
        data: function () {
            return{
//                是否显示点状分页
                paginationShow: true

            }
        },


        props: {
            infoOfInitSwiper: {
                type: Object,
                default: {}
            },
        },

        created: function () {
            this.$nextTick(() => {
                this.__initSwiper();

            })


        },

        computed: {
            createContainerStyle: function () {
                return `width: ${this.infoOfInitSwiper.width}; height: ${this.infoOfInitSwiper.height};`;
            }
        },

        methods: {
//            显示相关
            createBackground: function (imgUrl) {
                return `background-image: url(${imgUrl});`
            },

            __initSwiper: function () {
                let __this = this;
                __this.swiper = new Swiper(`#${__this.infoOfInitSwiper.id}`, {
                    autoplay: (__this.infoOfInitSwiper.autoPlay === true ? {
                        disableOnInteraction: false,
                        delay: 500
                    } : false),
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
//                        启动动态检查器
                    observer: true
                });

                __this.paginationShow = __this.infoOfInitSwiper.paginationShow;
            },

            refresh: function () {
//                if(this.swiper){
//                    console.log('有');
//                    return
//                }
//
//                else{
//                    console.log('没有swiper');
//                }
                this.__initSwiper();
            }
        },




    }

</script>

<style lang='scss' scoped>
    @import "./swiper.scss";

</style>

我现在出现的问题是，swiper组件外层的wrapper v-show=true 的组件是正常的，另一个为false的不正常，swiper初始化失败了。我猜可能是没有渲染上去，所以在tab切换的时候重新初始化，但是没有效果。

thanks for you help!

Answer 1

如果是单文件组件的话， https://github.com/surmon-chi... 应该符合你的需求

Answer 2

我放弃了。我将这两个swiper合并成一个了。

Answer 3

import "./swiper.scss";
(在用node装了swiper插件之后)这句改为
import "swiper/css/swiper.css";
就可以啦