深圳靠谱的电商公司/搜索引擎优化 简历

基本使用方法

1.安装

cnpm install vue-awesome-swiper --save

 

2.引用

/*全局引入*/import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式，以及具体位置。Vue.use(VueAwesomeSwiper, /* { default global options } */)/*组件方式引用*/import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否需要引入样式，以及具体位置。import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {components: {swiper,swiperSlide}

 

3.使用

    <swiper :options="swiperOption"><swiper-slide><img src="static/images/jay.jpg"></swiper-slide><swiper-slide><img src="static/images/jay.jpg"></swiper-slide><swiper-slide><img src="static/images/jay.jpg"></swiper-slide><swiper-slide><img src="static/images/jay.jpg"></swiper-slide><swiper-slide><img src="static/images/jay.jpg"></swiper-slide><swiper-slide><img src="static/images/jay.jpg"></swiper-slide></swiper><!--以下看需要添加--><div class="swiper-scrollbar"></div> //滚动条<div class="swiper-button-next"></div> //下一项<div class="swiper-button-prev"></div> //上一项<div class="swiper-pagination"></div> //标页码

data() {return {swiperOption: {  notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        autoplay: {delay: 1000, //自动切换的时间间隔，单位msstopOnLastSlide: false, //当切换到最后一个slide时停止自动切换stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。reverseDirection: false, //开启反向自动轮播。waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
        },loop: true,direction: 'horizontal',grabCursor: true,setWrapperSize: true,autoHeight: true,pagination: {el: '.swiper-pagination'},centeredSlides: true,paginationClickable: true,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'},keyboard: true,mousewheelControl: true,observeParents: true, // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debuggerdebugger: true  } }},

 

4.可选参数

fadeEffect: {crossFade: false,}cubeEffect: {slideShadows: true, //开启slide阴影。默认 true。shadow: true, //开启投影。默认 true。shadowOffset: 100, //投影距离。默认 20，单位px。shadowScale: 0.6 //投影缩放比例。默认0.94。
  },
coverflowEffect: {rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。depth: 60, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。modifier: 2, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。slideShadows : true //开启slide阴影。默认 true。
  },
flipEffect: {slideShadows : true, //slides的阴影。默认true。limitRotation : true, //限制最大旋转角度为180度，默认true。
  }
zoom: {maxRatio: 5, //最大倍数minRatio: 2, //最小倍数toggle: false, //不允许双击缩放，只允许手机端触摸缩放。containerClass: 'my-zoom-container', //zoom container 类名
   },
navigation: {nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。hideOnClick: true, //点击slide时显示/隐藏按钮disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
   },pagination: {el: '.swiper-pagination',type: 'bullets',//type: 'fraction',//type : 'progressbar',//type : 'custom',progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反bulletElement : 'li', //设定分页器指示器（小点）的HTML标签。dynamicBullets: true,  //动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。dynamicMainBullets: 2, //动态分页器的主指示点的数量hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
},
scrollbar: {el: '.swiper-scrollbar',hide: true, //滚动条是否自动隐藏。默认：false，不会自动隐藏。draggable: true, //该参数设置为true时允许拖动滚动条。snapOnRelease: true, //如果设置为false，释放滚动条时slide不会自动贴合。dragSize: 30, //设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。},