玩转数据结构从入门到进阶视频

基本使用方法
1.安装（略）
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: {//swiper3
      autoplay: 3000,
      speed: 1000,
      }
    }
  }

三、配置

参数  类型（swiper3） 默认值（swiper3）    类型（swiper4） 默认值（swiper4）    说明
autoplay    Number/Boolean  0/false Object  autoplay    自动切换
speed   Number  300 Number  300 切换速度
loop    Boolean false   Boolean false   loop模式
loopAdditionalSlides    Number  0   Number  0   loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
loopedSlides    Number  1   Number  1   在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
direction   String  horizontal  String  horizontal  Slides的滑动方向
autoplayDisableOnInteraction    Boolean true    -   -   用户操作swiper之后，是否禁止autoplay
autoplayStopOnLast  Boolean true    -   -   切换到最后一个slide时停止自动切换
grabCursor  Boolean false   Boolean false   鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
width   Number  -   Number  -   强制Swiper的宽度
height  Number  -   Number  -   强制Swiper的高度
autoHeight  Boolean false   Boolean false   自动高度
freeMode:                   swiper3/4 api相同
freeMode    Boolean false   -   -   free模式，slide会根据惯性滑动且不会贴合
freeModeMomentum    Boolean true    -   -   free模式动量。若设置为false则关闭动量，释放slide之后立即停止不会滑动。
freeModeMomentumRatio   Number  1   -   -   free模式动量值（移动惯量）
freeModeMomentumVelocityRatio   Number  1   -   -   动量反弹
freeModeMomentumBounce  Boolean true    -   -   Slides的滑动方向
freeModeMomentumBounceRatio Number  1   -   -   值越大产生的边界反弹效果越明显，反弹距离越大。
freeModeSticky  Boolean false   -   -   使得freeMode也能自动贴合。
effect:                 swiper3/4 api相同
effect  String  slide   -   -   slide的切换效果。
fade/fadeEffect(4)  Object  fade    -   -   fade效果参数。
cube/cubeEffect Object  cube    -   -   cube效果参数。
coverflow/coverflowEffect   Object  coverflow   -   -   coverflow效果参数。
flip/flipEffect Object  flip    -   -   flip效果参数。
Zoom:                   
zoom    Boolean false   Object  zoom    焦距功能：双击slide会放大，并且在手机端可双指触摸缩放。
zoomMax Number  3   -   -   最大缩放焦距（放大倍率）.
zoomMin Number  1   -   -   最小缩放焦距（缩小倍率）。
zoomToggle  Boolean true    -   -   设置为false，不允许双击缩放，只允许手机端触摸缩放。
pagination:                 
pagination  String  -   Object  pagination  分页器容器的css选择器或HTML标签
paginationType  String  -   -   -   bullets’ 圆点（默认）‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义
paginationClickable Boolean false   -   -   点击分页器的指示点分页器控制Swiper切换
paginationHide  Boolean false   -   -   默认分页器会一直显示
paginationElement   String  span    -   -   设定分页器指示器（小点）的HTML标签。
Navigation Buttons:             swiper4 navigation  
nextButton  string / HTMLElement    -   -   -   前进按钮的css选择器或HTML元素。
prevtButton string / HTMLElement    -   -   -   后退按钮的css选择器或HTML元素。
Scrollbar:                  
scrollbar   string / HTMLElement    -   Object  swiper4 Scrollbar   Scrollbar容器的css选择器或HTML元素
scrollbarHide   Bolean  true    -   -   滚动条是否自动隐藏。
scrollbarDraggable  Boolean false   -   -   该参数设置为true时允许拖动滚动条。
scrollbarSnapOnRelease  Boolean false   -   -   如果设置为true，释放滚动条时slide自动贴合。

玩转数据结构从入门到进阶视频

猜你喜欢