前端 vue swipe 輪播 自定組件高效開發 - 戴向天

大家好！我叫戴向天

QQ羣：602504799

QQ:809002582

如若有不理解的，可加QQ羣進行諮詢瞭解

layout-div 組件詳情 》https://blog.csdn.net/weixin_41088946/article/details/91448369

<template>

  <layout-div :style="getStyle" class="over-h posi-r">
    <layout-div :style="getChildStyle" class="flex" @load="loadHandle">
      <slot/>
    </layout-div>
    <layout-div class="flex-center flex posi-a b0 l0 r0" :height="40" :unit="unit" v-if="!$slots.point">
      <layout-div class="flex">
        <layout-div v-for="i in this.length" :key="i" class="op-5" :mar="[0,15]" :height="20" :width="20"
                :bg="Math.abs(index) == i-1?'red':'#fff'" :fillet="20" :unit="unit"/>
      </layout-div>
    </layout-div>
    <slot v-else name="point"/>
  </layout-div>

</template>
<script>
  export default {
    props: {
      value: {
        type: Number,
        default: 0
      },
      width: {   //寬
        type: Number,
        default: null
      },
      height: {  //高
        type: Number,
        default: null,
      },
      unit: {   //單位
        type: String,
        default: 'px'
      },
      time: {   //時間（毫秒）
        type: Number,
        default: 3000
      },
      direction: { //方向 X | Y (注意是：大寫)
        type: String,
        default: "X"
      },
      duration: {    //每次切換的時間（毫秒）
        type: Number,
        default: 300
      },
      autoPlay: {   //是否自動輪播
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        style: {},
        multiple: 50,  //倍數處理，更加UI進行 100倍是按照 750*1334 的UI
        dom: null,     //當前swipe元素
        length: 0,    //子元素的數量
        countWidth: 0,   //總長度
        index: 0,
        isTouch: false,// 手指是否在屏幕上
      }
    },
    methods: {
      loadHandle(e) {
        this.dom = e.dom
        this.length = e.dom.childElementCount
        for (let i = 0; i < this.length; i++) {
          this.dom.children[i].style.height = this.height ? this.height / this.multiple + this.unit : ''
          this.dom.children[i].style.width = parseFloat(this.dom.style.width) / this.length / this.multiple + this.unit
          this.dom.children[i].style.flexGrow = 1;
        }
        this.bingTouch(this.dom)
        // 判斷可不可以自動輪播
        if (this.autoPlay && this.length) this.beginSwipe()
      },
      bingTouch(dom) {
        const self = this;
        let tranX = 0
        this.touch({
          stop: false,
          dom,
          start(e) {
            dom.style.transitionDuration = '0ms'
            tranX = parseFloat(dom.style.transform.split("(")[1]) || 0
          },
          move({dx}) {
            dom.style.transform = `translateX(${dx + tranX + self.unit})`;
          },
          change({direction}) {
            switch (direction) {
              case 'left':
                self.index--;
                break;
            }
            self.moveHandle()
          }
        })
      },
      moveHandle() {     //移動
        const Y = parseFloat(this.dom.style.width) / this.length
        this.dom.style.transitionDuration = `${this.duration}ms`
        this.dom.style.transform = `translateX(${this.index * Y + this.unit})`;
        setTimeout(() => {
          if (!this.isTouch) {
            if (Math.abs(this.index) == this.length - 1) {
              // console.log("要開始調換位置了");
              const first = this.dom.firstChild;
              first.style.transform = `translateX(${(Math.abs(-this.index) + 1) * Y + this.unit})`;
            } else if (Math.abs(this.index) == this.length) {
              // console.log("開始下一輪了")
              const first = this.dom.firstChild;
              this.dom.style.transitionDuration = '0ms'
              this.dom.style.transform = `translateX(${0 + this.unit})`;
              this.index = 0;
              first.style.transform = `translateX(${0 + this.unit})`;
            }
          }
          this.$emit('input', Math.abs(this.index))
        }, this.duration)
      },
      beginSwipe() {
        setTimeout(() => {
          if (this.isTouch) return this.beginSwipe(); //如果是手指在移動，就不再執行
          this.index--
          this.moveHandle()
          this.beginSwipe()
        }, this.time > this.duration ? this.time : this.duration + 1000)
      }
    },
    computed: {
      getStyle() {
        if (this.unit != 'rem') this.multiple = 1;
        const width = this.width ? this.width / this.multiple + this.unit : '100%',
          height = this.height ? this.height / this.multiple + this.unit : ''
        return {width, height};
      },
      getChildStyle() {
        if (this.unit != 'rem') this.multiple = 1;
        this.countWidth = ((this.width || this.dom ? this.dom.parentNode.clientWidth : window.screen.width) / this.multiple * this.length)
        this.style.width = this.countWidth + this.unit
        if (this.height) {
          this.style.height = this.height / this.multiple + this.unit
        } else {
          this.style.height = ''
        }
        return this.style;
      }
    }
  }

</script>

class - style 具體內容如下

css 參考的 UI設計尺寸爲 750*1334

.over-h {
  overflow: hidden;
}
.posi-r {
  position: relative;
  z-index: 0;
}
.flex {
  display: flex;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.posi-a {
  position: absolute;
  z-index: 0;
}
.b0 {
  bottom: 0;
}

.l0 {
  left: 0;
}
.r0 {
  right: 0;
}
.op-5 {
  opacity: 0.5
}
.font-68 {
  font-size: 0.68rem;
}
.col-f {
  color: #fff;
}

示例代碼

 <layout-swipe :height="240" :time="2000" unit="rem">
      <layout-div bg="red" class="flex-center flex font-68 col-f">1</layout-div>
      <layout-div bg="yellow" class="flex-center flex font-68 col-f">2</layout-div>
      <layout-div bg="green" class="flex-center flex font-68 col-f">3</layout-div>
 </layout-swipe>

效果圖