資訊專欄INFORMATION COLUMN
摘要：前言目前在使用建立的版項(xiàng)目中，直接引入官方的文件會導(dǎo)致報(bào)錯(cuò)，所以需要用到版本的。安裝版配置使用可參考插入滑塊組件與官方相同，額外的控制器依然可以放到整個(gè)滑塊之外。
前言
目前(2017-07-11)在使用vue-cli建立的webpack版項(xiàng)目中，直接引入官方的swiper文件會導(dǎo)致報(bào)錯(cuò)，所以需要用到vue版本的swiper。
新建vue項(xiàng)目webpack-simple版可直接引入官方swiper文件，參考這里
此處使用vue-cli新建項(xiàng)目
vue init webpack demo //Enter + y 全部選 yes cd demo npm i補(bǔ)安裝sass-loader node-sass
由于不明原因，vue的webpack版竟沒有裝sass，需要另外安裝，不需要用sass則可跳過此步。
npm i -D sass-loader node-sass安裝vue版swiper
npm i -S vue-awesome-swiper配置使用
import vue-awesome-swiper可參考 A simple vue-awesome-swiper demo
import { swiper, swiperSlide } from "vue-awesome-swiper"
插入滑塊組件
與官方swiper相同，額外的控制器依然可以放到整個(gè)滑塊之外。
設(shè)置參數(shù)I"m Slide 1 I"m Slide 2 I"m Slide 3
export default {
name: "carrousel",
data() {
return {
swiperOption: {
// notNextTick是一個(gè)組件自有屬性，如果notNextTick設(shè)置為true，組件則不會通過NextTick來實(shí)例化swiper，也就意味著你可以在第一時(shí)間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個(gè)屬性一定要是true
notNextTick: true,
// swiper configs 所有的配置同swiper官方api配置
autoplay: 3000,
prevButton:".swiper-button-prev",
nextButton:".swiper-button-next",
}
}
},
components: {
swiper,
swiperSlide
},
}
完整參考
demo.vue
...附官方api... I"m Slide 1 I"m Slide 2 I"m Slide 3
swiper官方api
vue版swiper項(xiàng)目地址github地址
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83959.html
摘要：移動端輪播圖插件，在使用圖形界面插件中的組件無法實(shí)現(xiàn)觸摸滑動后，轉(zhuǎn)而使用插件安裝我這里安裝的是下面的這個(gè)版本使用全局導(dǎo)入樣式的話，我這里有用到分頁器，就在全局中引入了樣式組件引入在中使用常見的小圓點(diǎn) 移動端輪播圖插件，在使用iview圖形界面插件中的carousel組件無法實(shí)現(xiàn)觸摸滑動后，轉(zhuǎn)而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...
摘要：出錯(cuò)前糾正后總結(jié)官網(wǎng)其實(shí)早放出說明來了，但自己一看全是英文，就沒想看下去。發(fā)現(xiàn)網(wǎng)上關(guān)于最新就兩三篇，而且沒說清楚。于是寫下這篇，希望對大家有幫助。 關(guān)于新版 swiper,vue-awesome-swiper 問題 為什么我的swiper,vue-awesome-swiper組件pagination小圓點(diǎn)不顯示問題? 為什么我的swiper不會自動播放？ 為什么我的swiper沒有c...
摘要：前言本文的前身是源自上的項(xiàng)目但由于該項(xiàng)目上次更新時(shí)間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項(xiàng)目。提交的項(xiàng)目格式如下項(xiàng)目名稱子標(biāo)題相關(guān)介紹如果收錄的項(xiàng)目有錯(cuò)誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項(xiàng)目awesome-github-vue,但由于該項(xiàng)目上次更新時(shí)間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...
摘要：有目錄結(jié)構(gòu)書寫方式組件集成項(xiàng)目構(gòu)建等的約束，整個(gè)應(yīng)用中是沒有文件的，所有的響應(yīng)都是動態(tài)渲染的，包括里面的元信息路徑等。更多參考細(xì)說后端模板渲染客戶端渲染中間層服務(wù)器端渲染開發(fā)工具開發(fā)時(shí)主要會用到的工具。 vue 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài) 聲明：這不是一篇介紹 Vue 基礎(chǔ)知識的文章，需要熟悉 Vue 相關(guān)知識 主架構(gòu)：vue, vue-router, vuex UI 框...
閱讀 1174·2021-09-27 13:34
閱讀 981·2021-09-13 10:25
閱讀 511·2019-08-30 15:52
閱讀 3450·2019-08-30 13:48
閱讀 648·2019-08-30 11:07
閱讀 2167·2019-08-29 16:23
閱讀 1993·2019-08-29 13:51
閱讀 2328·2019-08-26 17:42
