使用ElementUi中Carousel走馬燈實作H5輪播圖，可手動左右滑動圖檔

使用ElementUi中Carousel走馬燈實作（H5）輪播圖，可手動左右滑動圖檔

<template>
  <div class="bottom_layer">
    <div class="white_layer">
      <el-carousel ref="nop" arrow="never" height="180px" :autoplay="type">
        <div @touchstart="start($event)" @touchmove="move($event)">
          <el-carousel-item class="el_carousel__item_style" v-for="item in list">
            <el-image class="el_carousel__item_image" :src="item.value"></el-image>
          </el-carousel-item>
        </div>
      </el-carousel>
      <div style="width: 100%;float: left; ">
        <div style="width: 100%;text-align: center;margin-top: 16px;">
          <div class="a_div_label_top">
            <label>姓名：</label>
            <label>張三</label>
          </div>
          <div class="a_div_label_top">
            <label>票号：</label>
            <label>XD0011380HNU4B</label>
          </div>
        </div>
      </div>
      <hr style="border: 4px solid #EEEEEE"></hr>
      <div style="float: left;height: 300px;margin-top: 16px;">
        <div class="a_div_label">
          <label>購票資訊：</label>
          <label>test</label>
        </div>
        <div class="a_div_label">
          <label>訂單編号：</label>
          <label>XD0011380HNU4B</label>
        </div>
        <div class="a_div_label">
          <label>票類型：</label>
          <label>套票</label>
        </div>
        <div class="a_div_label">
          <label>有效期：</label>
          <label>2021-10-30</label>
        </div>
        <div class="a_div_label">
          <label>訂單金額：</label>
          <label>99.99</label>
        </div>
        <div class="a_div_label">
          <label>遊客姓名：</label>
          <label>張三</label>
        </div>
        <div class="a_div_label">
          <label>手機号碼：</label>
          <label>18546532544</label>
        </div>
        <div class="a_div_label">
          <label>證件号碼：</label>
          <label>500236199907176035</label>
        </div>
        <div class="a_div_label">
          <label>如有疑問請咨詢：</label>
          <label>18580573666</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Template",
  data() {
    return {
      type: false,
      list: [{
        "name": 1,
        "value": "https://img9.51tietu.net/pic/2019-091322/ejrclz2dfpiejrclz2dfpi.jpg"
      }, {
        "name": 2,
        "value": "https://img9.51tietu.net/pic/2019-091322/mq1fqfjao1gmq1fqfjao1g.jpg"
      }, {
        "name": 3,
        "value": "https://img9.51tietu.net/pic/2019-091322/4xber0hs4r34xber0hs4r3.jpg"
      }, {
        "name": 4,
        "value": "https://img9.51tietu.net/pic/2019-091322/51hpcsvk4mc51hpcsvk4mc.jpg"
      }],
      startX: '',
      startY: '',
      moveY: '',
      moveX: '',
      startTime: '',
    }
  },
  methods: {



    start(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    move(e) {
      this.moveX = e.touches[0].clientX;
      this.moveY = e.touches[0].clientY;
      var nowtime = new Date().getTime();
      if (this.startTime == undefined || nowtime > this.startTime) {
        if (this.startX - this.moveX <= 0) { // 右滑觸發
          this.prev();
          return false;
        } else {
          this.next();
          return false;
        }
      }
    },
    prev() {
      this.$refs.nop.prev();
      this.startTime = new Date().getTime() + 500;
    },
    next() {
      this.$refs.nop.next();
      this.startTime = new Date().getTime() + 500;
    },
  }
}
</script>

<style>

.white_layer {
  background-color: #fff;
  height: 100%;
  width: 96%;
  margin-left: 2%
}

.bottom_layer {
  background-color: #EEEEEE;
  height: 100%;
  width: 100%
}

.a_div_label_top {
  height: 28px;
  width: 100%;
  font-size: 12px;
}

.a_div_label {
  height: 28px;
  width: 96%;
  margin-left: 18px;
  font-size: 12px;
}

.div_lable_font {
  height: 100px;
  border: 1px solid #1e1e1e;
}

.el_carousel__item_image {
  width: 160px;
  height: 160px;
  margin-top: 20px;
}

.el_carousel__item_style {
  text-align: center;
  height: 180px;
}
</style>      

View Code

圖檔效果如下：