Swiper是壹款純javascript制作的滑動特效插件，針對手機、平板等移動終端。本文主要介紹如何解決在vue中使用swiper插件的問題，以及swiper在vue中的用法。有需要的朋友可以參考壹下。
Swiper簡介
Swiper常用來觸摸和滑動移動網站的內容。
Swiper是壹款純javascript制作的滑動特效插件，針對手機、平板等移動終端。
Swiper可以實現觸摸屏焦點圖、觸摸屏Tab切換、觸摸屏多圖切換等常見效果。
Swiper開源、免費、穩定、易用、功能強大，是搭建移動終端網站的重要選擇！
解決swiper插件在vue中使用的問題。swiper插件引入後，發現無法正常運行。
這次我們模擬從後臺獲取數據，然後將數據綁定到swiper標記中。
& lt模板& gt
& ltp class="homePage " >
& ltabc & gt& lt/ABC & gt；
& ltp id="banner">。
& ltp class="swiper-container " >
& ltp class="swiper-wrapper " >
& ltp class = " swiper-slide " v-for = " swiper中的項目" >& lta href = " " & gt& ltimg:src = " rel = " external no follow " items . activity . img " & gt；& lt/a & gt；& lt/p & gt；
& lt/p & gt；
& ltp class="swiper-pagination " >& lt/p & gt；
& lt/p & gt；
& lt/p & gt；
& lt/p & gt；
& lt/template & gt；
& lt腳本& gt
從以下位置導入Swiper "../../static/js/swiper-3 . 4 . 0 . min . js "；
從“components/header.vue”導入標頭；
導出默認值{
組件:{
abc:標題
},
data(){
返回{
swiper:" "
}
},
已安裝(){
這個。$/aixianfeng/apihome.php”)。然後(函數(res){
this . swiper = RES . data . data . slide；
var mySwiper = new Swiper('。swiper-container '，{
Autoplay: 2000，//可選選項，自動滑動。
//尋呼機
分頁:'。“翻頁鍵”，
paginationClickable :true，
觀察者:沒錯
})
})
}
}
& lt/script & gt；
& ltstyle type="text/css " >
@導入"../../static/CSS/home . CSS "；
@導入"../../static/CSS/swiper-3 . 4 . 0 . min . CSS "；
& lt/style & gt；重點是mounted()的使用，所有這些方法都需要在mounted()中使用。mounted()是vue的壹個生命周期鉤子，妳也可以把它理解為壹個只有在實例掛載到DOM時才會被觸發的方法。
我們來看看swiper在vue中的用法。
首先，通過NPM I vue-Awesome-Swiper-Save下載Vue中的插件。
然後引入main.js
require(' swiper/dist/CSS/swiper . CSS ')
從“vue-awesome-swiper”導入VueAwesomeSwiper
Vue。use(vueawesomewir)然後將代碼插入到需要使用的組件的結構中。
& ltp class="banner " >
& ltswiper:options = " swipe option " & gt；
& ltswiper-slide v-for = " all data . banner photo中的項目" key="items " >
& ltimg:src = " items " alt = " " & gt；
& lt/swiper-slide & gt；
& ltp class = " swiper-pagination " slot = " pagination " >& lt/p & gt；
& lt/swiper & gt；
& ltp class="jc " >& lt/p & gt；
& lt/p & gt；然後在數據中定義輪播。
swipe option:{
分頁:'。“翻頁鍵”，
paginationClickable: true，
自動播放:2500，
autoplayDisableOnInteraction:false，
循環:假，
coverflow: {
旋轉:30度，
拉伸:10，
深度:60，
修飾詞:2，
幻燈片陰影:真
}
}，此時coverflow就是切換輪播圖的方式。更改屬性可以切換輪播模式。
相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章！
推薦閱讀:
vue中mint-ui的使用詳解
webpack熱模塊的更換和使用的詳細說明
如何選擇使用jQuery版本？