Swiper-轮播图

Posted 2020-10-14 Colorful_coco

Swiper（移动端触摸滑动插件）

轮播图

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in bannerList"></div>
    </div>            
    <div class="swiper-pagination"></div><!-- 分页器 -->
</div>

mounted: function(){
    //查询广告轮播图列表
    this.$common.httpPost(\'queryMerBannerList.do\',{Channel:\'G\'},data => {
        var bannerList=data.BannerList;
        this.bannerList=bannerList;    
        if(bannerList.length>0){
            //定时器是为了解决分液器bug(请求需要时间返回列表)
            setTimeout(function(){
                var swiper = new Swiper(\'.swiper-container\', {
                    pagination: \'.swiper-pagination\',
                    paginationClickable: true,
                    observer:true,//当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    observeParents:true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
                    autoplay:2000,
                    loop:true,
                    autoplayDisableOnInteraction:false//用户操作swiper之后，是否禁止autoplay
               });
            },100);
        }    
    });
}