實例: 錯誤(無法顯示出分頁器按鈕,此功能不適用與for迴圈出來的圖片,只有當該頁面圖片固定幾張時能正常用) 第一步: 安裝 npm i swiper (vue插件自帶) 第二步: 在當前頁面里引入 第三步:當然吶,或許你在想內容吶,別急,為了大家的方便內容的寫法我也會提供 <html代碼> <di ...
實例: 錯誤(無法顯示出分頁器按鈕,此功能不適用與for迴圈出來的圖片,只有當該頁面圖片固定幾張時能正常用)
第一步: 安裝 npm i swiper (vue插件自帶)
第二步: 在當前頁面里引入
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
第三步:當然吶,或許你在想內容吶,別急,為了大家的方便內容的寫法我也會提供
<html代碼>
<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>
<js>
vue初始化請求里添加該方法
mounted () {
var that = this;
that.$nextTick(function(){
var mySwiper = new Swiper(".swiper-container",{
direction:"horizontal",/*橫向滑動*/
loop:true,形成環路（即：可以從最後一張圖跳轉到第一張圖
pagination:".swiper-pagination",/*分頁器*/
autoplay:3000/*每隔3秒自動播放*/
});
})
},
css就不多說了,控制大小應該都會.
接下來說第二個正確且簡單的方法
正確:
第一步: 安裝 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常用的目前踩到的坑就在這裡,後續有會持續更新喲
