• vue轮播（完整详细版）

    轮播组件vue  

    <swiper :options="swiperOption" class='swiper-box'>
        <swiper-slide v-for="v in swipers"><img :src="v.fdcImage" class="swiper-img"style="100%;height:1.8rem"></swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>

    </swiper>

    安装

    npm install vue-awesome-swiper --save

    首先在main.js引入

       import VueSwiper from 'vue-awesome-swiper'
       Vue.use(VueSwiper)
     
    然后就可以用了：
     
      mounted () {
                setTimeout(() => {
                    this.asyncCount = 5
                }, 1000)
            },
            data () {
                return {
                  
                    swiperOption: {
                        autoplay: 3000,
                        pagination: '.swiper-pagination',
                        autoplayDisableOnInteraction: false,
                        loop: true
                    },
                 swipers:[]
        }
            }
    vue-awesome-swiper的API文档：

    一、先说一个看关于vue-awesome-swiper的一个坑

           vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4"，用npm install自动安装依赖时装的版本为"version": "2.6.7"，而单独安装（npm install vue-awesome-swiper@2.5.4）的则是正常的"version": "2.5.4"。

           这两个版本都是基于swiper3的，从官网上swiper3的教程来看并不需要单独引入样式文件，而2.6.7版本需要单独引入swiper/dist/css目录下的swiper.css样式文件（类似于swiper4）。

           并且2.6.7版本swiper位于node_modules/vue-awesome-swiper/node_modules下；2.5.4不需要单独引入样式文件，并且swiper直接位于node_modules文件夹下。

    二、基本使用方法

    1.安装（略）

    2.引用

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

    3.使用

    就是一般组件的用法

    1.  <swiper :options="swiperOption">
    2.  <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    3.  <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    4.  <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    5.  <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    6.  <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    7.  <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    8.  </swiper>
    9.  <!--以下看需要添加-->
    10.  <div class="swiper-scrollbar"></div> //滚动条
    11.  <div class="swiper-button-next"></div> //下一项
    12.  <div class="swiper-button-prev"></div> //上一项
    13.  <div class="swiper-pagination"></div> //标页码
    1.  data(){
    2.  return{
    3.  swiperOption: {//swiper3
    4.  autoplay: 3000,
    5.  speed: 1000,
    6.  }
    7.  }
    8.  }

    三、配置

    参数类型（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自动贴合。

    autoplay:

    1.  autoplay: {
    2.  delay: 3000, //自动切换的时间间隔，单位ms
    3.  stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
    4.  stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。
    5.  disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。
    6.  reverseDirection: true, //开启反向自动轮播。
    7.  waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。 
    8. },

    fade:

    1.  fadeEffect: {
    2.  crossFade: false,
    3.  }

    cube:

    1.  cubeEffect: {
    2.  slideShadows: true, //开启slide阴影。默认 true。
    3.  shadow: true, //开启投影。默认 true。
    4.  shadowOffset: 100, //投影距离。默认 20，单位px。
    5.  shadowScale: 0.6 //投影缩放比例。默认0.94。
    6.  },

    coverflow:

    1.  coverflowEffect: {
    2.  rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。
    3.  stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
    4.  depth: 60, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
    5.  modifier: 2, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
    6.  slideShadows : true //开启slide阴影。默认 true。
    7.  },

    flip:

    1.  flipEffect: {
    2.  slideShadows : true, //slides的阴影。默认true。
    3.  limitRotation : true, //限制最大旋转角度为180度，默认true。
    4.  }

    zoom:

    1.  zoom: {
    2.  maxRatio: 5, //最大倍数
    3.  minRatio: 2, //最小倍数
    4.  toggle: false, //不允许双击缩放，只允许手机端触摸缩放。
    5.  containerClass: 'my-zoom-container', //zoom container 类名
    6.  },

    navigation:

    1.  navigation: {
    2.  nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
    3.  prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
    4.  hideOnClick: true, //点击slide时显示/隐藏按钮
    5.  disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
    6.  hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
    7.  },

    pagination:

    1.  pagination: {
    2.  el: '.swiper-pagination',
    3.  type: 'bullets',
    4.  //type: 'fraction',
    5.  //type : 'progressbar',
    6.  //type : 'custom',
    7.  progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反
    8.  bulletElement : 'li', //设定分页器指示器（小点）的HTML标签。
    9.  dynamicBullets: true, //动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。
    10.  dynamicMainBullets: 2, //动态分页器的主指示点的数量
    11.  hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
    12.  clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
    13. },

    Scrollbar:

    1.  scrollbar: {el: '.swiper-scrollbar', hide: true, //滚动条是否自动隐藏。默认：false，不会自动隐藏。
    2.  draggable: true, //该参数设置为true时允许拖动滚动条。
    3.  snapOnRelease: true, //如果设置为false，释放滚动条时slide不会自动贴合。
    4.  dragSize: 30, //设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。
    5.  }
  • 相关阅读:
    schema文件中cube的事实表使用视图方法
    Saiku国际化总结
    saiku安装方法总结
    MySQL中的datetime与timestamp比较（转载）
    js中的刷新方法
    如何用 Node.js 和 Elasticsearch 构建搜索引擎
    Win7搭建NodeJs开发环境以及HelloWorld展示—图解
    NodeJS开发环境搭建
    从零开始nodejs系列文章
    windows 下安装nodejs及其配置环境
  • 原文地址：https://www.cnblogs.com/benmumu/p/9285197.html
Copyright © 2020-2023  润新知