zoukankan      html  css  js  c++  java
  • Swiper-轮播图

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

     
  • 相关阅读:
    白话机器学习
    Intersecting Lines POJ
    Segments POJ
    Toy Storage POJ
    TOYS POJ
    2019CCPC秦皇岛赛区1004 Decimal
    Django 基本使用
    HTML页面布局
    微擎上传视频,音频,图片提示格式不支持
    微擎应用名称图标的修改
  • 原文地址:https://www.cnblogs.com/colorful-coco/p/7122617.html
Copyright © 2011-2022 走看看