Vue2.x中使用旧版swiper问题相关

ZQuann

于 2020-12-14 09:36:59 发布

阅读量498

点赞数

分类专栏： vue_swiper 文章标签： vue vue.js

本文链接：https://blog.csdn.net/GoGee/article/details/111149981

版权

本文记录了在Vue2.x项目中使用旧版本swiper时遇到的loop循环轮播失效问题的解决方案。通过在组件创建后利用this.$nextTick在DOM更新后执行相关设置，避免了因Vue的数据观测机制导致的DOM操作不生效，从而确保了swiper的正常运行。

摘要由CSDN通过智能技术生成

在Vue2.x中使用旧版本swiper问题记录

首先在main.js中设置全局引入

import 'swiper/swiper-bundle.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

<template>
    <div class="banner swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in banners" :key="index">
                <img :src="item.picUrl" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
    import Swiper from 'swiper'

    export default {
        name: 'Banner',
        data() {
            return {
                banners: null,
            }
        },
        methods: {
            bannerLoop() {