碼上快樂

相關內容    簡體    繁體

vue輪播（完整詳細版）

本文轉載自   查看原文   2018-07-09 18:12   11512    vue輪播/ vue

輪播組件vue  

<swiper :options="swiperOption" class='swiper-box'>
    <swiper-slide v-for="v in swipers"><img :src="v.fdcImage" class="swiper-img"style="width: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.  }


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 SpringBoot整合Mybatis完整詳細版 SpringMVC框架搭建流程（完整詳細版） Java學習路線（完整詳細版）超詳細 大數據學習路線（完整詳細版） swiper輪播在vue中動態綁定返回的數據圖片顯示不完整 vue.config.js 的完整配置（超詳細）！ vue的完整版和運行時版的區別 新手版超詳細LoadRunner12完整安裝+漢化過程 vue全屏輪播 vue實現輪播效果
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM