解决vue中使用swiper插件——李帅醒博客

解决vue中使用swiper插件，在引入swiper插件后，发现无法正常运行

这次我们模拟从后台取下数据，然后数据绑定在swiper标签中。

<template>
    <div class="home_page">
        <m-header></m-header>
        <div id="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="items in swiper"><a href=""><img :src="items.activity.img"></a></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
</template>

 

<script> 
import Swiper from "../../static/js/swiper-3.4.0.min.js";
import mHeader from 'components/header.vue';
export default {
    components: {
        mHeader
    },
    data() {
        return {
            swiper: []
        }
    },
    created(){
        this.getList()
    },
    methods: {
        getList() {
            this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then((res) => {
                this.swiper = res.data.data.slide;
                // 数据回来了，DOM还没渲染完,所以需要调用Vue提供的$nextTick方法，再进行swiper初始化。
                this.$nextTick(() => {
                    this.initSwiper();
                })
            })
        },
        initSwiper() {
            let mySwiper = new Swiper('.swiper-container', {
                autoplay: 2000,//可选选项，自动滑动
                //分页器
                pagination: '.swiper-pagination',
                paginationClickable: true,
                observer: true
            })
        }
    }
}
</script>

 重点就在$nextTick的使用，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。