使用swiper完成轮播图

<template>
  <div class="swiper-container">

    　　<!-- 插槽 -->
    　　<slot></slot>
　　　</div>

  </div>
</template>

<template>
  <div class="detail">
    <div class="img">
      <img v-lazy="film.poster" />
    </div>
    <SwiperSide :key="‘actors_‘ + film.actors.length">
      <div v-for="item in film.actors" class="swiper-slide">
        <div>
          <img :src="item.avatarAddredd" />
          <h6>名字</h6>
        </div>
      </div>
    </SwiperSide>
  </div>
</template>

<script>
// 这就是上面的Swiper组件
import SwiperSide from ‘../../components/Swiper‘
import { detailData } from ‘../../api/api‘
export default {
  components: { SwiperSide },
  data() {
    return {
      id: 0,
      film: { actors: [] }
    }
  },
  created() {
    //   发布一个让底部菜单隐藏的指令 这个是我写的底部菜单你点击进来肯定要隐藏掉底部菜单行 所以这个大家不用管
    this.$bus.$emit(‘footernav‘, false)
  },
  async mounted() {
    this.id = this.$router.params.id
　　　//detailData是封装的请求 下面给你看下怎么封装的　
    const ret = await detailData(this.id)
    this.flim = ret.data.data.film
  },
  beforeDestory() {
    //   发布一个让底部菜单显示的指令
    this.$bus.$emit(‘footernav‘, true)
  }
}
</script>

// 引入封装头信息和请求域名的axios对象 我这里就不写了你可以网上找下自己封装一下
import http from ‘./http‘
// 这个就是你请求的接口地址
import  {flimListUrl} form ‘./config/uri‘

export const detailData = (page = 1) => {
    return http.get(flimListUrl + page)
}