Vue-滑动轮播

查看完整代码直接跳到结尾git链接🔗。

1.项目结构

2.设计组件

2.1 swiper设计

<template>
  <!--id,class用来设计样式;因为我不是很熟悉，所以不做说明。-->
  <div id="r-swiper">
    <div class="swiper" 
      @touchstart="touchStart"
      @touchend="touchEnd"> <!--用来获取点击事件-->
      <slot name="picslot"></slot>
    </div>
  </div>
  <!--之所以平级设计是因为小圆点之后position:absolute是相对于父组件的位置，
  因此想要固定在最上方就要评级设计是的相对id='app'固定-->
  <div class="indicator">
    <div
      v-for="index in swiperItemCount"
      :key="index"
      class="indicator-item"
      :class="{active: index === currentIndex+1}"
    ></div><!--动态绑定，用来显示小圆点-->
  </div>
</template>

2.2 swiper-item设计

<template>
  <!-- 子组件插入图片 -->
  <div class="r-swiper-item">
    <slot></slot>
  </div>
</template>

3.设计样式

3.1 App.vue

<style>

  #app {
   
    overflow: hidden;
    position: relative;
  }
</style>

3.2 swiper

<style scoped>
/* #r-swiper {
  overflow: hidden;
  position: relative;
} */

.swiper {
   
  display: flex;
}
.indicator {
   
  display: flex;
  /*