這篇文章主要介紹了vue引入新版 vue-awesome-swiper插件填坑問題,現在分享給大家,也給大家做個參考。
本文介紹了關於新版vue-awesome-swiper,分享給大家,具體如下:
##問題
引入(前面的步驟和往常一樣)
npm install vue-awesome-swiper --save
在main,js 裡引入(全局) :
import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css'
(css 不顯示的問題可能就在這)
元件裡引入:
import 'swiper/dist/css/swiper.css' //在全局没引入,这里记得要! import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }
配置
template:
<swiper :options="swiperOption"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <p class="swiper-pagination" slot="pagination"></p> </swiper>
script:
export default { data() { return { swiperOption: { // 所有的参数同 swiper 官方 api 参数一样 // } } }, ... }
重點在於swiperOption 裡面的變化,差異看下圖:
##原來pagination 和autoplay 要這樣設定!
我原來就是在這兩處錯了,導致 pagination 不顯示,圖片不輪播。
出錯前:# 修正後:
總結
vue-awesome-swiper官網其實早放出說明來了,但自己一看全是英文,就沒想看下去。後來發其實很容易看懂得,吸取教訓自己多去看看文檔,不要找 demo 去抄。
上面是我整理給大家的,希望今後對大家有幫助。 相關文章:jquery.picsign中如何使用圖片標註元件
以上是有關vue-awesome-swiper插件問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!