vue swiper动态添加轮播图

编程基础网前端开发

2023-10-08

vue swiper动态添加轮播图bodydiv id=vue_list v-cloakdiv class=bg1div class=swiper-container banner mar1div class=swiper-wrapperdiv class=swiper-slide v-for=(item, index) in caro...

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>

编程基础网

本文标题为：vue swiper动态添加轮播图