实用数据交互持续更新

banner 获取后盾数据

/* css */
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in allBanner">
            <img :src="imgSrc + item.bannerPic" width="100%" alt="">
        </div>
    </div>
    <!--<div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>-->
</div>

// vue

// 数据交互
bannerList:function (id){
    axios.post(allUrl2.banner).then((response) => {
        if (response != "" && response.code == 0) {
            this.allBanner = response.data
            this.$nextTick(() => { // 获取数据后在执行swiper【必加】
                this.banner();
            })
        }else {

        }
    }).catch(function () {

    });
},
//swiper
banner:function(){
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        autoplay: {
            delay: 2000,
            disableOnInteraction: false,
        },
        loop: true,
        observer: true, //批改swiper本人或子元素时，主动初始化swiper 【必加】
        observeParents: true //批改swiper的父元素时，主动初始化swiper【必加】
    })
},