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

 

标签：轮播,detailData,swiper,完成,组件,import,mySwiper,Swiper
来源： https://www.cnblogs.com/ht955/p/14267421.html