使用swiper完成轮播图

swiper：https://www.swiper.com.cn/usage/index.html

安装swiper

cnpm i -S swiper

在功能组件中定义Swiper组件并设置好插槽

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

　　　　<div class="swiper-wrapper">

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

 　　<!-- 导航按钮 这个自己想要就写不想要可以不写-->

    <div class="swiper-button-prev" @click="prev"></div>

    <div class="swiper-button-next" @click="next"></div>

  </div>
</template>

<script>

// 使用此组件中，添加内容一定要有 swiper-slide

import Swiper from 'swiper'

import 'swiper/swiper-bundel.min.css'

export default {

  data() {

    return {

      mySwiper: null

    }

  },

  mounted() {

    //   dom操作

    // $nextTick 当虚拟dom渲染完毕，生成了真实的dom方法

    this.$nextTick(() => {

      // 在数据没有请求得到时。实例化了，此时米有得到外层div的绝对宽，滚动没有办法

      this.mySwiper = new Swiper(

        '.swiper-container',

        //   设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设　　　　　　　　定数量。

        // loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。

        // slidesPerView: 'auto'目前还不支持多行模式（当slidesPerColumn > 1）

        // loop: true,

        { slidesPerView: 4 }

      )

    })

  },

  methods: {

    prev() {

      this.mySwiper.slidePrev()

    },

    next() {

      this.mySwiper.slideNext()

    }

  },

  beforeDestroy() {

    //   关掉动画

    this.mySwiper = null

  }

}

</script>

<style>

.swiper-container {

  width: 100%;

}

</style>

在显示组件是调用swiper组件完成横向滚动

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

封装detailData请求

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

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