vue引入新版 vue-awesome-swiper插件填坑問題

更新時間：2018年01月25日 09:47:02 作者：CodingHot

這篇文章主要介紹了vue引入新版 vue-awesome-swiper插件填坑問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了關于新版 vue-awesome-swiper，分享給大家，具體如下：

問題

為什么我的vue-awesome-swiper組件pagination小圓點不顯示問題?
為什么我的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: {
   // 所有的參數同 swiper 官方 api 參數一樣
   // 
  }
 }
},
...
 }

重點在于 swiperOption 里面的變化，區(qū)別看下圖：

原來 pagination 和 autoplay 要這樣配置！

我原來就是在這兩處錯了，導致 pagination 不顯示，圖片不輪播。

出錯前：

糾正后：

總結

vue-awesome-swiper官網其實早放出說明來了，但自己一看全是英文，就沒想看下去。后來發(fā)其實很容易看懂得，吸取教訓自己多去看看文檔，不要找 demo 去抄。

還是少依靠插件，有些插件隨時更新，等有能力，自己造！

弄到晚上12點，才弄明白原來 Swiper 版本區(qū)分了組件和普通版本，不能看照原來的經驗寫了。

發(fā)現網上關于最新 vue-awesome-swiper就兩三篇，而且沒說清楚。于是寫下這篇，希望對大家有幫助，也希望大家多多支持腳本之家

您可能感興趣的文章:

vue-awesome-swiper

Vue實現點擊顯示不同圖片的效果
這篇文章主要為大家詳細介紹了Vue實現點擊顯示不同圖片的效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-08-08
如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
這篇文章主要介紹了如何配置vue.config.js 處理static文件夾下的靜態(tài)文件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-06-06
使用webpack搭建vue環(huán)境的教程詳解
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實例的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-12-12
vue+animation動畫實現跑馬燈效果
這篇文章主要為大家詳細介紹了vue+animation動畫實現跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vant IndexBar實現的城市列表的示例代碼
這篇文章主要介紹了vant IndexBar實現的城市列表的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
Vue腳手架的簡單使用實例
這篇文章主要介紹了Vue腳手架的簡單使用實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Vue Promise的axios請求封裝詳解
這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
超簡單的Vue.js環(huán)境搭建教程
這篇文章主要為大家分享了一份超簡單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
詳解vue中使用transition和animation的實例代碼
這篇文章主要介紹了詳解vue中使用transition和animation的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-12-12
vue3結合typescript中使用class封裝axios
這篇文章主要為大家介紹了vue3結合typescript中使用class封裝axios實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06