码迷,mamicode.com
首页 > 其他好文 > 详细

Swiper-轮播图

时间:2017-11-16 21:57:28      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:data   line   wip   height   ted   lin   his   请求   resize   

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);
        }    
    });
}

技术分享

 

Swiper-轮播图

标签:data   line   wip   height   ted   lin   his   请求   resize   

原文地址:http://www.cnblogs.com/colorful-coco/p/7122617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!