1. 程式人生 > >vue輪播圖外掛vue-awesome-swiper的使用

vue輪播圖外掛vue-awesome-swiper的使用

      最近寫vue2.0專案中用到了輪播圖的一個外掛,也就是vue-awesome-swiper,個人感覺還是比較強大的,swiper官網中的API及配置均可使用(支援3.0),以下說下使用該外掛的一些步驟:

第一步安裝

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'(如果你使用的是2.6.0以上的版本要自己手動去載入cssVue.use(VueAwesomeSwiper)

然後就可以在元件中使用該外掛

<template>
	<div>
		<swiper :options="swiperOption"  ref="mySwiper">
			<!-- 這部分放你要渲染的那些內容 -->
			<swiper-slide v-for="item in items">
			</swiper-slide>
			<!-- 這是輪播的小圓點 -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>
<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		components: {
			swiper,
			swiperSlide
		},
		data() {
			return {
				swiperOption: {
				//是一個元件自有屬性,如果notNextTick設定為true,元件則不會通過NextTick來例項化swiper,也就意味著你可以在第一時間獲取到swiper物件,假如你需要剛載入遍使用獲取swiper物件來做什麼事,那麼這個屬性一定要是true
				notNextTick: true,
		        pagination: '.swiper-pagination',
		        slidesPerView: 'auto',
		        centeredSlides: true,
		        paginationClickable: true,
		        spaceBetween: 30,
		            onSlideChangeEnd: swiper => {
		            	//這個位置放swiper的回撥方法
		            	this.page = swiper.realIndex+1;
		            	this.index = swiper.realIndex;
		            }
		        }
			}
		},
		//定義這個sweiper物件
		computed: {

		    swiper() {
		      return this.$refs.mySwiper.swiper;
		    }
		},
		mounted () {
			//這邊就可以使用swiper這個物件去使用swiper官網中的那些方法
		    this.swiper.slideTo(0, 0, false);
		}

	}
</script>
<style>
</style>




相關推薦

vue外掛vue-awesome-swiper的使用

      最近寫vue2.0專案中用到了輪播圖的一個外掛,也就是vue-awesome-swiper,個人感覺還是比較強大的,swiper官網中的API及配置均可使用(支援3.0),以下說下使用該外掛的一些步驟:第一步安裝npm install vue-awesome-sw

vue外掛vue-awesome-swiper

移動端輪播圖外掛,在使用iview圖形介面外掛中的carousel元件無法實現觸控滑動後,轉而使用vue-awesome-swiper外掛 1.npm安裝 npm i vue-awesome-swiper -S 我這裡安裝的是下面的這個版本 2.使用 全域性匯入:

VUE 安裝 外掛vue-awesome-swiper

npm install vue-awesome-swiper--save//import 引入import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'<template>    <div>    &l

vue插件vue-awesome-swiper的使用與組件化

css 對象類型 輪播 單獨 文件 ima some nbsp cnpm 不管是APP還是移動端網頁開發,輪播圖在大部分項目當中都是存在的,這時候如果用vue開發項目,選擇一款好的插件並且封裝好是很重要的 1. 推薦使用vue-awesome-swiper 安裝:cnpm

vue 插件 Vue-Awesome-Swiper

mic targe swiper blank som wip 地址 http github Vue-Awesome-Swiper GitHub地址:https://github.com/surmon-china/vue-awesome-swiper vue 輪播圖插件

vue報錯 Uncaught RangeError: Maximum call stack size exceeded 附完整實現程式碼

Vue初學者,寫專案實現輪播圖時報錯且頁面初始化後不會自動輪播。 設定的計時器時長是6000,但報錯是幾乎沒有停歇的報錯。 檢查核心程式碼,發現 錯誤一:這裡導致輪播圖初始化不輪播 mounted的方法寫在了methods裡面,將mounted的方法挪出,解決頁面初始化輪播圖不

vue --

輪播圖,可以使用mint-ui中的swipe   HTML: <Swipe :auto="4000">   <SwipeItem v-for="item in slideitem">     <img :src="item.

swiper () 外掛的使用

<link rel="stylesheet" href="./swiper-4.4.1/dist/css/swiper.min.css"> <script src="./swiper-4.4.1/dist/js/swiper.min.j

一個簡單的VUE示例

之前教別人用vue寫輪播圖,寫了個例子,只供參考,請勿吐槽引入vue.js我就不用說了,下面試輪播圖樣式<style> *{padding:0;margin:0;} ul{ position:relative; overflow:hidden;} ul li

2018.01.26.使用vue元件

複習鞏固vue知識,開始製作bulbBright(類似於微博的程式)。關於vue官方元件輪播圖。通俗易懂的說:先開啟cmd,cd 你的專案路徑,然後全域性安裝就是輸入指令npm install -S vue-carousel。接下來main。js檔案下輸入import VueCarousel from 'vu

外掛swiper

剛用swiper做輪播圖的時候,我一直做不出來,後來發現原來我只引入了swiper的js,沒有引入swiper的css. 這兩個都是必須引入的,而jquery庫無論有沒有都能執行swiper. 基本

封裝Vue

ssi pread turn ams dex sta 分享圖片 lin res slot 生命周期 操作dom在mounted 操作數據在created 操作數據也可以放在mounted $nextTick 上面的執行 下面的才會更新 v-once 只渲染一次

vue -元件

涉及知識點: <transition-group name="list"></transition-group> 事件 定時器 條件語句 生命週期 src/views/animate/index.vue 通俗易懂

Day050--jQuery表單事件 外掛庫 ajax

表單控制元件的事件   change()表單元素髮生改變時觸發事件  select()文字元素髮生改變時觸發事件  submit()表單元素髮生改變時觸發事件      .focus() 獲取焦點 .blur() 釋放焦點   <!DOC

JavaScript響應式外掛–Flickity

簡介 flickity是一款自適應手機觸屏滑動外掛,它的API引數很豐富,包括對齊方式、迴圈滾動、自動播放、是否支援拖動、是否開啟分頁、是否自適應視窗等。 線上演示及下載 演示地址 下載頁面 使用方法 引入檔案 <link rel="stylesheet" href="flickity.

Bootstrap carousel外掛 簡潔版

HTML部分 (只需修改圖片路徑,增刪圖片數量都可,尺寸統一) <!--引用bootstrap的輪播圖--> <div id="carousel-example-generic" class="carousel slide" data-ride=

一個原生JS外掛的全部實現

前段時間把模組化開發的學習整理了之後就想著做個小外掛。本文記錄個人獨立完成的一個原生JS輪播圖外掛的實現過程。嗯,東西很簡單,大佬勿噴。github求start 涉及知識點: 模組化開發 ES6 JS HTML5和css

vue-awesome-swiper實現

install mys cti turn fff rip 引入 save data 1.首先通過npm安裝vue-awesome-swiper,我在項目中用的是2.6.7版本 npm install [email protected] –save 2.

組件及vue-awesome-swiper的引入

vue組件 -s -c pan target 錯誤 package size 初始 ?記在前面 你有多自律,就有多美好。 一、新建home.vue 1.上一篇為了方便展示,把頭部my-header組件放在了App.vue,現在我們刪掉App.vu

vue-awesome-swiper實現, 點選事件不生效

在專案裡使用swiper實現輪播圖效果 把點選事件掛到圖片或者swiper上在切頁之後, 或者輪播到次輪之後, 有的圖片無法點選 原因是開啟了(loop:true) 開啟loop, 在DOM結構上,s