vue-awesome-swiper 首图与尾图切换时，空白，需滑动才显示解决方法

最新推荐文章于 2024-04-20 00:45:00 发布

小码农哒哒哒

最新推荐文章于 2024-04-20 00:45:00 发布

阅读量710

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qtfiot/article/details/133815532

版权

“vue-awesome-swiper”: “^4.1.1”,

<div
            v-if="adsList.length > 1"
            ref="mySwiper"
            v-swiper:mySwiper="swiperOption"
            class="vue-awesome-swiper"
        >
            <div class="swiper-wrapper">
                <div
                    v-for="(item, index) in adsList"
                    :key="index"
                    class="swiper-slide"
                >
                    <template v-if="item.link != ''">
                        <img
                            :src="item.img"
                            style="width: 1200px; height: 400px"
                        />
                    </template>
                    <img
                        v-else
                        :data-src="item.img"
                        style="width: 1200px; height: 400px"
                    />
                </div>
            </div>
            <div slot="pagination" class="swiper-pagination"></div>
        </div>

2.解决方法

mounted() {
        console.log(this.swiper)
        setTimeout(() => {
            const imagebox = this.$refs.mySwiper.getElementsByTagName('img')
            console.log(imagebox)
            if (imagebox.length) {
                imagebox[0].src = this.adsList[this.adsList.length - 1].img
                imagebox[imagebox.length - 1].src = this.adsList[0].img
                 相互替换
            }
        }, 500)
    },