0

我正在使用 vue-awesome-swiper 作为产品库。用户可以选择不同的产品，我希望画廊相应地更新。

如果产品有超过 1 张图片（大多数情况下），我希望刷卡器使用循环功能。如果产品只有 1 张图片，我希望它在没有循环功能的情况下工作。

假设我能够在正确的时间捕捉到它应该是真还是假，我怎样才能让刷卡器更新或重新初始化循环功能的不同设置？

我试过每一种组合

this.swiper.destroy()
this.swiper.init() 
new Swiper()
this.swiper.passedParams.loop = true/false

无论我做什么，要么循环功能保持不变，要么刷卡器实际上没有初始化。

编辑：这是代码的真正简化版本。你可能会问“他为什么要这么做？” 在几个位上。如果您看到完整的代码，那将是有意义的，但它有点太大，无法在此处发布。无论哪种方式，它都不应该影响对循环问题的解决方案的响应。

<template>
    <div class="pdp-main__gallery">
        <swiper ref="mainSwiper"
                id="pdpMainSwiper"
                :options="mainSwiperOptions"
                :data-swiper-group-id="swiperGroup"
                :auto-update="true"
                :auto-destroy="true"
        >
            <swiper-slide v-if="galleryProduct.LargeImage[1]">
                <img ref="image" :data-href="galleryProduct.ExtraLargeImage[1]" :src="galleryProduct.LargeImage[1]" />
            </swiper-slide>
            <swiper-slide v-if="galleryProduct.LargeImage[2]">
                <img ref="image" :data-href="galleryProduct.ExtraLargeImage[2]" :src="galleryProduct.LargeImage[2]" />
            </swiper-slide>
            <swiper-slide v-if="galleryProduct.LargeImage[3]">
                <img ref="image" :data-href="galleryProduct.ExtraLargeImage[3]" :src="galleryProduct.LargeImage[3]" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'

    export default {
        components: {
            Swiper,
            SwiperSlide,
        },
        props: {
            swiperGroup: {
                type: String,
                required: true,
            },
            product: {
                type: Object,
                required: false,
                default() {
                    return undefined;
                },
            },
        },
        data(){
            return {
                galleryProduct: {
                    LargeImage: {},
                    ExtraLargeImage: {},
                },
                mainSwiperOptions: {
                    loop: true,
                    watchOverflow: true,
                    setWrapperSize: false,
                    initialSlide: 0,
                    spaceBetween: 5,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    normalizeSlideIndex: false,
                    freeMode: false,
                    autoHeight: APP.Browser().data.isMobile,
                    followFinger: APP.Browser().data.isMobile,
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'bullets',
                        clickable: true,
                    },
                },
            }
        },
        computed: {
            mainSwiper() {
                return this.$refs.mainSwiper.$swiper
            },
            shouldLoop() {
                if(this.product.LargeImage1 && this.product.LargeImage2) return true; else return false;
            },
        },
        created() {
            this.setGalleryImages();
        },
        mounted() {
            this.setGalleryImages();
        },
        watch: {
            product(newVal, oldVal) {
                if(newVal.LargeImage1 != oldVal.LargeImage1) {
                    this.setGalleryImages();
                    this.$nextTick(function() {
                        if(this.mainSwiperOptions.loop) this.mainSwiper.slideToLoop(0, 0);
                        this.thumbsSwiper.slideTo(0);
                    });
                }
            },
        },
        methods: {
            setGalleryImages()
            {
                var needsReinit = false;
                if(this.shouldLoop !== this.mainSwiperOptions.loop) {
                    this.mainSwiperOptions.loop = this.shouldLoop;
                    this.destroyMainSwiper();
                    needsReinit = true;
                }

                this.galleryProduct.LargeImage[1] = this.product.LargeImage1;
                this.galleryProduct.ExtraLargeImage[1] = this.product.ExtraLargeImage1;
                this.galleryProduct.LargeImage[2] = this.product.LargeImage2;
                this.galleryProduct.ExtraLargeImage[2] = this.product.ExtraLargeImage2;
                this.galleryProduct.LargeImage[3] = this.product.LargeImage3;
                this.galleryProduct.ExtraLargeImage[3] = this.product.ExtraLargeImage3;

                if(needsReinit) {
                    this.initMainSwiper();
                }

                return;
            },
            destroyMainSwiper() {
                this.mainSwiper.destroy();
                // this.mainSwiper.destroy(false, false);
            },
            initMainSwiper() {
                //let swiper = this.mainSwiper.init();
                var swiper = new Swiper('#pdpMainSwiper', this.mainSwiperOptions);
                // this.$refs.mainSwiper.$swiper = swiper;
            }
        }
    };
</script>

帮助表示赞赏！

4

0 回答 0