黃聰：如何正確在Vue框架裏使用Swiper

時間 2019-12-04

標籤如何正確 vue 框架使用 swiper 简体版

原文原文鏈接

實例: 錯誤(沒法顯示出分頁器按鈕,此功能不適用與for循環出來的圖片,只有當該頁面圖片固定幾張時能正經常使用)javascript

第一步: 安裝 npm i swiper (vue插件自帶)css

第二步: 在當前頁面裏引入html

import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css';

第三步:固然吶,或許你在想內容吶,別急,爲了你們的方便內容的寫法我也會提供vue

<html代碼>java

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide" v-for="item in swiperitem"><img :src="item.thumb"></div>(for循環)(tip: 能夠把for循環換成正常展現圖片,以下面展現方法,每張圖對應的放進去,分頁器是能夠用的,for循環這樣分頁器是沒法顯示與切換的)
　　　　< !--<div class="swiper-slide"><img src="http://cdn.qcacg.com//img/Illustration/11_02.jpg"></div>-->(固然,你也能夠根據上面for循環裏有幾條數據添加幾個這個div,img路徑無關緊要,有也不會展現,分頁器是根據swiper-slide判斷顯示與切換輪播的)
　　</div>
　　<div class="swiper-pagination swiprRem"></div>(分頁器)
</div>npm

<js>app

vue初始化請求裏添加該方法ide

mounted () {
　　var that = this;
　　that.$nextTick(function(){
　　　　var mySwiper = new Swiper(".swiper-container",{
　　　　　　direction:"horizontal",/*橫向滑動*/
　　　　　　loop:true,造成環路（即：能夠從最後一張圖跳轉到第一張圖
　　　　　　pagination:".swiper-pagination",/*分頁器*/
　　　　　　autoplay:3000/*每隔3秒自動播放*/
　　　　});
　　})
},oop

css就很少說了,控制大小應該都會.this

接下來講第二個正確且簡單的方法

正確:

第一步: 安裝 npm i vue-awesome-swiper --save( 這一個是否安裝根據實際狀況,若是安裝上一個你用沒效果也要安裝這個 => npm i swiper )

第二步: 在main.js文件裏引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

在當前頁面引入

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

第三步;

<html>

<swiper :options= "swiperOption" >

　　<swiper-slide v- for = "items in allData.bannerphoto" key= "items" >

　　　　<img :src= "items" alt= "" >

　　</swiper-slide>

　　<div class= "swiper-pagination" slot= "pagination" ></div> (分頁器)

</swiper>

在data裏定義輪播圖

 
  swiperOption: { 
 
  　　pagination:  
  '.swiper-pagination' 
  , 
 
  　　paginationClickable:  
  true 
  , 
 
  　　autoplay: 2500, 
 
  　　autoplayDisableOnInteraction:  
  false 
  , 
 
  　　loop:  
  false 
  , 
 
  　　coverflow: {(輪播圖切換方式) 
 
  　　　　rotate: 30, 
 
  　　　　stretch: 10, 
 
  　　　　depth: 60, 
 
  　　　　modifier: 2, 
 
  　　　　slideShadows :  
  true 
 
  　　} 
 
  },

關於swiper在vue裏的分享就到這裏了,各位用的感受闊以的幫忙點個讚唄,畢竟寫了這麼多,嘿嘿.關於swiper經常使用的目前踩到的坑就在這裏,後續有會持續更新喲

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。