vue引入新版 vue-awesome-swiper插件填坑問題
更新時間：2018年01月25日 09:47:02 作者：CodingHot
這篇文章主要介紹了vue引入新版 vue-awesome-swiper插件填坑問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了關(guān)于新版 vue-awesome-swiper，分享給大家，具體如下：
問題
- 為什么我的vue-awesome-swiper組件pagination小圓點(diǎn)不顯示問題?
- 為什么我的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> <div class="swiper-pagination" slot="pagination"></div> </swiper>
script：
export default {
data() {
return {
swiperOption: {
// 所有的參數(shù)同 swiper 官方 api 參數(shù)一樣
//
}
}
},
...
}
重點(diǎn)在于 swiperOption 里面的變化，區(qū)別看下圖：
原來 pagination 和 autoplay 要這樣配置！
我原來就是在這兩處錯了，導(dǎo)致 pagination 不顯示，圖片不輪播。
出錯前：
糾正后：
總結(jié)
vue-awesome-swiper官網(wǎng)其實早放出說明來了，但自己一看全是英文，就沒想看下去。后來發(fā)其實很容易看懂得，吸取教訓(xùn)自己多去看看文檔，不要找 demo 去抄。
還是少依靠插件，有些插件隨時更新，等有能力，自己造！
弄到晚上12點(diǎn)，才弄明白原來 Swiper 版本區(qū)分了組件和普通版本，不能看照原來的經(jīng)驗寫了。
發(fā)現(xiàn)網(wǎng)上關(guān)于最新 vue-awesome-swiper就兩三篇，而且沒說清楚。于是寫下這篇，希望對大家有幫助，也希望大家多多支持腳本之家
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)點(diǎn)擊顯示不同圖片的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
這篇文章主要介紹了如何配置vue.config.js 處理static文件夾下的靜態(tài)文件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實例的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了vue+animation動畫實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vant IndexBar實現(xiàn)的城市列表的示例代碼
這篇文章主要介紹了vant IndexBar實現(xiàn)的城市列表的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Vue腳手架的簡單使用實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家分享了一份超簡單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
詳解vue中使用transition和animation的實例代碼
這篇文章主要介紹了詳解vue中使用transition和animation的實例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
vue3結(jié)合typescript中使用class封裝axios
這篇文章主要為大家介紹了vue3結(jié)合typescript中使用class封裝axios實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06