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小圓點不顯示問題?
- 為什么我的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ù)一樣
//
}
}
},
...
}
重點在于 swiperOption 里面的變化，區(qū)別看下圖：
原來 pagination 和 autoplay 要這樣配置！
我原來就是在這兩處錯了，導(dǎo)致 pagination 不顯示，圖片不輪播。
出錯前：
糾正后：
總結(jié)
vue-awesome-swiper官網(wǎng)其實早放出說明來了，但自己一看全是英文，就沒想看下去。后來發(fā)其實很容易看懂得，吸取教訓(xùn)自己多去看看文檔，不要找 demo 去抄。
還是少依靠插件，有些插件隨時更新，等有能力，自己造！
弄到晚上12點，才弄明白原來 Swiper 版本區(qū)分了組件和普通版本，不能看照原來的經(jīng)驗寫了。
發(fā)現(xiàn)網(wǎng)上關(guān)于最新 vue-awesome-swiper就兩三篇，而且沒說清楚。于是寫下這篇，希望對大家有幫助，也希望大家多多支持腳本之家
相關(guān)文章
vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例
這篇文章主要為大家介紹了vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue.js中,computed屬性根據(jù)依賴進(jìn)行緩存,只有依賴改變時才重新計算,這樣有效提高性能,computed屬性是響應(yīng)式的,可以自動更新,并且默認(rèn)是只讀的,它與methods的主要區(qū)別在于計算屬性具有緩存性,而方法每次調(diào)用都會執(zhí)行,使用computed可以使模板更加簡潔,提高應(yīng)用性能2024-09-09
在Vue的開發(fā)過程中，我們經(jīng)常需要展示代碼片段或者進(jìn)行代碼高亮與語法著色，Vue提供了多種方式來實現(xiàn)代碼高亮與語法著色，本文將為你詳細(xì)介紹這些方法,需要的朋友可以參考下2023-06-06
vue/cli?配置動態(tài)代理無需重啟服務(wù)的操作方法
vue-cli是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板，分為vue?init?webpack-simple?項目名和vue?init?webpack?項目名兩種，這篇文章主要介紹了vue/cli?配置動態(tài)代理，無需重啟服務(wù),需要的朋友可以參考下2022-05-05
基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容
這篇文章主要介紹了基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue3+vite使用jsx和tsx詳情，文章通過安裝@vitejs/plugin-vue-jsx展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
ref和reactive一樣,也是用來實現(xiàn)響應(yīng)式數(shù)據(jù)的方法,下面這篇文章主要給大家介紹了關(guān)于vue3給動態(tài)渲染的組件添加ref的解決方案,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue中provide?inject的響應(yīng)式監(jiān)聽解決方案
這篇文章主要介紹了vue中provide?inject的響應(yīng)式監(jiān)聽解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue項目引入字體.ttf的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決vant title-active-color與title-inactive-color不生效問題
這篇文章主要介紹了解決vant title-active-color與title-inactive-color不生效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11