vue引入新版 swiper,vue-awesome-swiper填坑

Miyang 發(fā)布于2019-08-22 14:01 / 3241人閱讀

摘要：出錯(cuò)前糾正后總結(jié)官網(wǎng)其實(shí)早放出說(shuō)明來(lái)了，但自己一看全是英文，就沒想看下去。發(fā)現(xiàn)網(wǎng)上關(guān)于最新就兩三篇，而且沒說(shuō)清楚。于是寫下這篇，希望對(duì)大家有幫助。

關(guān)于新版 swiper,vue-awesome-swiper 問題

為什么我的swiper,vue-awesome-swiper組件pagination小圓點(diǎn)不顯示問題?

為什么我的swiper不會(huì)自動(dòng)播放？

為什么我的swiper沒有css？

使用 引入（前面的步驟和往常一樣）

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：


    I"m Slide 1
    I"m Slide 2
    I"m Slide 3

script：

export default {
    data() {
      return {
        swiperOption: {
          // 所有的參數(shù)同 swiper 官方 api 參數(shù)一樣
          // 
        }
      }
    },
    ...
  }

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

原來(lái) pagination 和 autoplay 要這樣配置！
我原來(lái)就是在這兩處錯(cuò)了，導(dǎo)致 pagination 不顯示，圖片不輪播。

出錯(cuò)前：

糾正后：

總結(jié)

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

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

弄到晚上12點(diǎn)，才弄明白原來(lái) Swiper 版本區(qū)分了組件和普通版本，不能看照原來(lái)的經(jīng)驗(yàn)寫了。
發(fā)現(xiàn)網(wǎng)上關(guān)于最新 vue-awesome-swiper就兩三篇，而且沒說(shuō)清楚。于是寫下這篇，希望對(duì)大家有幫助。

GPU云服務(wù)器云服務(wù)器 cdn引入vue swiper swiper cdn swiper.js

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92767.html

相關(guān)文章

vue-awesome-swiper滑塊插件使用基礎(chǔ)

摘要：前言目前在使用建立的版項(xiàng)目中，直接引入官方的文件會(huì)導(dǎo)致報(bào)錯(cuò)，所以需要用到版本的。安裝版配置使用可參考插入滑塊組件與官方相同，額外的控制器依然可以放到整個(gè)滑塊之外。前言目前(2017-07-11)在使用vue-cli建立的webpack版項(xiàng)目中，直接引入官方的swiper文件會(huì)導(dǎo)致報(bào)錯(cuò)，所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文...

microelec 2019-08-20 17:54 評(píng)論0 收藏0
vue輪播圖插件之vue-awesome-swiper

摘要：移動(dòng)端輪播圖插件，在使用圖形界面插件中的組件無(wú)法實(shí)現(xiàn)觸摸滑動(dòng)后，轉(zhuǎn)而使用插件安裝我這里安裝的是下面的這個(gè)版本使用全局導(dǎo)入樣式的話，我這里有用到分頁(yè)器，就在全局中引入了樣式組件引入在中使用常見的小圓點(diǎn) 移動(dòng)端輪播圖插件，在使用iview圖形界面插件中的carousel組件無(wú)法實(shí)現(xiàn)觸摸滑動(dòng)后，轉(zhuǎn)而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...

binta 2019-08-23 12:00 評(píng)論0 收藏0
在Vue/webpack引入第三方插件jQuery/swiper：簡(jiǎn)單易行

摘要：寫在前面日前，在學(xué)習(xí)使用開發(fā)新的項(xiàng)目。然而目前用實(shí)現(xiàn)的框架里面，尚未出現(xiàn)具有像一樣統(tǒng)治力的框架。最后這里只舉了和的例子，同理其他插件也是可用同樣的方法引入。雖以上皆經(jīng)過(guò)實(shí)戰(zhàn)檢驗(yàn)，但若有錯(cuò)誤歡迎指正。寫在前面日前，在學(xué)習(xí)使用Vue2.0開發(fā)新的項(xiàng)目。然而目前用Vue實(shí)現(xiàn)的UI框架里面，尚未出現(xiàn)具有像bootstrap一樣統(tǒng)治力的框架。一番糾結(jié)后，老夫抄起家伙就是一梭... 那么問題來(lái)...

April 2019-08-20 17:43 評(píng)論0 收藏0
基于 Vue 實(shí)現(xiàn)的移動(dòng)端圖片輪播組件.

摘要：基于的移動(dòng)端的圖片輪播組件之前一直在用功能很齊全但是唯一的問題就是體積比較大我只是想要一個(gè)簡(jiǎn)單的圖片輪播但是卻要引入多大小的文件這樣是不對(duì)的特點(diǎn)支持自動(dòng)播放無(wú)限輪播效果支持用戶手動(dòng)滑動(dòng)壓縮后大概使用在入口文件中引入暫時(shí)不支持單組 wc-swiper 基于 Vue 的移動(dòng)端的圖片輪播組件. why 之前一直在用 vue-awesome-swiper, 功能很齊全, 但是唯一的問題就是體積...

hsluoyz 2019-08-20 18:52 評(píng)論0 收藏0
vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

摘要：有目錄結(jié)構(gòu)書寫方式組件集成項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有文件的，所有的響應(yīng)都是動(dòng)態(tài)渲染的，包括里面的元信息路徑等。更多參考細(xì)說(shuō)后端模板渲染客戶端渲染中間層服務(wù)器端渲染開發(fā)工具開發(fā)時(shí)主要會(huì)用到的工具。 vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎(chǔ)知識(shí)的文章，需要熟悉 Vue 相關(guān)知識(shí) 主架構(gòu)：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 評(píng)論0 收藏0