当前位置: 首页>前端>正文

element ui使用轮播图如何 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;
    }
  }



容器样式参数,只接受一个高度,宽度是自适应的。




element ui使用轮播图如何 element ui轮播组件,element ui使用轮播图如何 element ui轮播组件_Vue,第1张


这是文档上记录的可传递的参数。

下面我们按照,这些传递的参数简单实现下它的功能。


<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, // 初始的index
  activeIndex: -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 === index
        this.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变化时,返回对应的style
    return {
      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>


element ui使用轮播图如何 element ui轮播组件,element ui使用轮播图如何 element ui轮播组件_加载_02,第2张


element ui使用轮播图如何 element ui轮播组件,element ui使用轮播图如何 element ui轮播组件_Vue_03,第3张


https://www.xamrdz.com/web/25b1935935.html

相关文章: