vue+mui輪播圖

mui的輪播圖，若是圖片是請求來的，直接在html中循環是不會動的。

須要請求完圖片以後，在setTimeout方法裏，使用slider()方法，這樣纔會動

並且mui的輪播圖，有點坑的，須要重複最後一張和第一張，纔會無縫連接

<template>
  <div class="rotation">
    <div class="logo"></div>
    <div class="mui-slider">
      <!-- mui-slider-loop 這個類是控制循壞輪播的 -->
      <div class="mui-slider-group mui-slider-loop">
        <!-- 重複最後一張輪播圖 -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <img :src="last">
        </div>

        <!-- 所有輪播圖 -->
        <div class="mui-slider-item" v-for="(item,i) in rotations">
          <img :src="item.mpSlug" alt>
        </div>

        <!-- 重複第一張輪播圖 -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <img :src="first">
        </div>
      </div>

      <!-- 輪播圖小圓點 -->
      <div class="mui-slider-indicator">
        <div class="mui-indicator" v-for="(item,i) in rotations"></div>
      </div>
    </div>
  </div>
</template>

import { httpUrl } from "../../http/http.js";
export default {
  name: "Rotation",
  data() {
    return {
      rotations: [],
      first: "",
      last: ""
    };
  },
  methods: {
    getRotation() {
      var data = "type=main_info&" + "offset=0&" + "limit=-1";
      this.$axios.post(httpUrl.getContentsList, data).then(res => {
        console.log(res);
        this.rotations = res.data.rows;
        //第一張
        this.first = this.rotations[0].mpSlug;
        //最後一張
        this.last = this.rotations[this.rotations.length - 1].mpSlug;
      });
    }
  },
  created() {
    this.getRotation();
    //請求完成後再調用slider方法，因爲axios裏沒有同步，因此使用setTimeout
    setTimeout(function() {
      //得到slider插件對象
      var gallery = mui(".mui-slider");
      gallery.slider({
        interval: 3000 //自動輪播週期，若爲0則不自動播放，默認爲0；
      });
    }, 300);
  }
};