首页 > 其他 > 详细

Swiper-轮播图

时间:2017-11-16 21:17:09      阅读:306      评论:0      收藏:0      [点我收藏+]

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-轮播图

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!