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

  }

};