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

Miyang 發布于2019-08-22 14:01 / 3233人閱讀

摘要：出錯前糾正后總結官網其實早放出說明來了，但自己一看全是英文，就沒想看下去。發現網上關于最新就兩三篇，而且沒說清楚。于是寫下這篇，希望對大家有幫助。

關于新版 swiper,vue-awesome-swiper 問題

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

為什么我的swiper不會自動播放？

為什么我的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: {
          // 所有的參數同 swiper 官方 api 參數一樣
          // 
        }
      }
    },
    ...
  }

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

原來 pagination 和 autoplay 要這樣配置！
我原來就是在這兩處錯了，導致 pagination 不顯示，圖片不輪播。

出錯前：

糾正后：

總結

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

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

弄到晚上12點，才弄明白原來 Swiper 版本區分了組件和普通版本，不能看照原來的經驗寫了。
發現網上關于最新 vue-awesome-swiper就兩三篇，而且沒說清楚。于是寫下這篇，希望對大家有幫助。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92767.html

vue-awesome-swiper滑塊插件使用基礎

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

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

摘要：移動端輪播圖插件，在使用圖形界面插件中的組件無法實現觸摸滑動后，轉而使用插件安裝我這里安裝的是下面的這個版本使用全局導入樣式的話，我這里有用到分頁器，就在全局中引入了樣式組件引入在中使用常見的小圓點移動端輪播圖插件，在使用iview圖形界面插件中的carousel組件無法實現觸摸滑動后，轉而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...

binta 2019-08-23 12:00 評論0 收藏0
在Vue/webpack引入第三方插件jQuery/swiper：簡單易行

摘要：寫在前面日前，在學習使用開發新的項目。然而目前用實現的框架里面，尚未出現具有像一樣統治力的框架。最后這里只舉了和的例子，同理其他插件也是可用同樣的方法引入。雖以上皆經過實戰檢驗，但若有錯誤歡迎指正。寫在前面日前，在學習使用Vue2.0開發新的項目。然而目前用Vue實現的UI框架里面，尚未出現具有像bootstrap一樣統治力的框架。一番糾結后，老夫抄起家伙就是一梭... 那么問題來...

April 2019-08-20 17:43 評論0 收藏0
基于 Vue 實現的移動端圖片輪播組件.

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

hsluoyz 2019-08-20 18:52 評論0 收藏0
vue 前端項目技術選型、開發工具、周邊生態

摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。 vue 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識主架構：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 評論0 收藏0