vue swiper动态添加轮播图

vue swiper动态添加轮播图

<body>
<div id="vue_list" v-cloak>

    <div class="bg1">
        <div class="swiper-container banner mar1">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in carouselList"><a :href="item.url"><img
                        :src="item.previewPath"/></a></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>


</div>
</body>
<script>
   
    vm_list = new Vue({
        el: '#vue_list',
        data: {           
            carouselList: [],
        },
        created() {
            this.getCarouselList()
        },
        methods: {     
            getCarouselList() {
                let that = this
                ajaxJson(ctx + 'api/carousel/list').done(function (res) {
                    that.carouselList = res.data.carouselList
                    that.$nextTick(() => {
                        new Swiper('.swiper-container', {
                            autoplay: true,
                        })
                    })
                })
            },
        }
    })
</script>
上一篇:浅谈被Swiper的坑


下一篇:基数排序原理及Java实现