這段時間，一直在學習些源碼，想了解下大佬的思路，看完后，只能說臥槽，還有這種操作。

element-ui一個Vue常用的組件庫，包含很多的知識點可以學習，其很多組件只是樣式的變化。難度比較大的，輪播算一個。今天就給大家簡單實現下它的一系列操作。

首先它分為兩個組件，一個是父組件（容器），另一個是子組件（幻燈片），首先容器是固定一個窗口，讓對應的幻燈片顯示。

我們先來寫好它的模版。

父組件

<div class="n-slide"><div class="n-slide-container" :style="{height: height}"><slot></slot></div> </div> .n-slide-container {position: relative;overflow: hidden;}

子組件

<template><div v-show="ready" :class="['n-slide-item',{animating}]" :style="translateStyle"><slot></slot></div> </template> .n-slide-item {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: 0;&.animating {transition: transform 0.4s ease-in-out;}}

容器樣式參數，只接受一個高度，寬度是自適應的。

這是文檔上記錄的可傳遞的參數。

下面我們按照，這些傳遞的參數簡單實現下它的功能。<script>export default {name: 'Slide',props: {loop: {type: Boolean,default: true},autoplay: {type: Boolean,default: true},height: String,interval: {type: Number,default: 3000},initialIndex: {type: Number,default: 0}},}

暫時，我們就只需要這些。實現一下自動滾動的功能。

首先我們需要加載幻燈片，看看有多少個：

父組件

data() {return {items: [],} }, methods: {upDataItems() {this.items = this.$children.filter(child => child.$options.name === 'NSlideItem')}}

子組件

created() {this.$parent && this.$parent.upDataItems()}

這里加載幻燈片是通過，子組件的created函數調用父組件的upDataItems函數實現的。

這里如果不懂的同學，可以好好了解下Vue的生命周期，當父組件和子組件在一起時，生命周期是怎樣的運作過程。就不詳細闡述了。

加載完后，我們需要讓輪播滾動起來。

父組件

mounted() {// 為了確保幻燈片加載完this.upDataItems()// $nextTick是把執行邏輯放入Vue的異步隊列中，等Vue的事件初始化完成后才會執行，為了正確的給activeIndex賦值，否則初始化輪播為最后一張this.$nextTick(() => {if (this.initialIndex < this.items.length && this.initialIndex >= 0) {this.activeIndex = this.initialIndex;}// 打開定時器this.startTimer();});}, data: {items: [],timer: null,initIndex: 0, // 初始的indexactiveIndex: -1 // 滾動的index }, methods: {startTimer() {this.timer = setInterval(this.playSlides, this.interval)},playSlides() {const items = this.items// 輪播滾動到最后一個就循環if (items.length && this.activeIndex < items.length - 1) {this.activeIndex++} else if (this.loop) {this.activeIndex = 0}}, },

這樣在一加載完組件后，activeIndex開始遞增，到了最后一個就重復，下面需要一個監聽器，監聽activeIndex的變化，然后去執行頁面視圖的變化。

watch: {autoplay(val) {if (val) {this.startTimer()}},activeIndex(activeIndex, oldIndex) {// 重新更新幻燈片的位置(主要函數)this.resetPositionItems(activeIndex, oldIndex)}},methods: {resetPositionItems(activeIndex, oldIndex) {this.items.forEach((item, index) => {item.initTranslate(index, activeIndex, oldIndex)})},}

子組件

name: 'NSlideItem', data() {return {translate: 0,ready: false,animating: false} }, methods: { // 處理循環輪播processIndex(index, activeIndex, length) {// 如果是最后一張都第一張if (activeIndex === 0 && index === length - 1) {return -1;// 如果是第一張到對后一張} else if (activeIndex === length - 1 && index === 0) {return length;} else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {return length + 1;} else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {return -2;}return index;},initTranslate(index, activeIndex, oldIndex) {const length = this.$parent.items.length;if (index !== activeIndex && length > 2 && this.$parent.loop) {index = this.processIndex(index, activeIndex, length);}this.animating = activeIndex === indexthis.translate = this.calcTranslate(index, activeIndex)// 組件初始化完this.ready = true},// 計算位移的距離，重點就是這個函數calcTranslate(index, activeIndex) {// 獲取父組件的寬度const distance = this.$parent.$el.offsetWidth// 可以仔細思考下這個計算return distance * (index - activeIndex)}} }, computed: {translateStyle() {// this.translate變化時,返回對應的stylereturn {transform: `translateX(${this.translate}px)`}} }, created() {this.$parent && this.$parent.upDataItems() }

這樣輪播就實現了。測試一下

<template><div style="width: 500px"><n-slide height="400px"><n-slide-item v-for="(item,index) of ['red','grey','black','orange']"><div class="item" :style="{height: '100%',background: item,color: '#ffffff',fontSize: '30px'}">{{index+1}}</div></n-slide-item></n-slide></div> </template>

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的element显示true或者false_element-ui轮播的简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。