乐趣区

实用数据交互持续更新

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【必加】})
},
退出移动版