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);
  }
};