使用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 {
   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)
}