element显示true或者false_element-ui轮播的简单实现
生活随笔
收集整理的這篇文章主要介紹了
element显示true或者false_element-ui轮播的简单实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這段時間,一直在學習些源碼,想了解下大佬的思路,看完后,只能說臥槽,還有這種操作。
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轮播的简单实现的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: eclipse创建springboot项
- 下一篇: problem k: 查找某一个数_qu