亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Miyang / 3300人閱讀

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

關(guān)于新版 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: {
          // 所有的參數(shù)同 swiper 官方 api 參數(shù)一樣
          // 
        }
      }
    },
    ...
  }

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

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

出錯前：

糾正后：

總結(jié)

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/92767.html

相關(guān)文章

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

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

    microelec 評論0 收藏0

  • vue輪播圖插件之vue-awesome-swiper

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

    binta 評論0 收藏0

  • 在Vue/webpack引入第三方插件jQuery/swiper：簡單易行

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

    April 評論0 收藏0

  • 基于 Vue 實現(xiàn)的 移動端圖片輪播組件.

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

    hsluoyz 評論0 收藏0

  • vue 前端項目技術(shù)選型、開發(fā)工具、周邊生態(tài)

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

    Awbeci 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<