2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/121778318

本文介绍如何在Vue移动端项目中封装一个轮播组件DetailSwiper，用于电影详情页展示演职员表和剧照的轮播。内容包括组件的创建，设置动态perView显示张数，以及轮播图的初始化方法。通过代码示例展示了具体实现过程和最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

0.实现效果

1.用同一个轮拨组件,详情页多个位置设置轮拨图
2.通过axios获取后台电影数据
3.演职员表的轮拨显示列数为4,剧照的轮拨显示列数是3
4.爬取的图片只显示其正中间部分(竖=>横)

1.封装详情页的轮拨组件DetailSwiper

新建views/Detail/DetailSwiper,把Film组件的轮拨图代码
Film/Swiper.vue

<template>
    <!-- 重命名为filmswiper -->
  	<div class="swiper-container filmswiper">
	    <div class="swiper-wrapper">
        <!-- <slot></slot> -->
          <div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/f6bef612cf73976c8bafeed2500a4f78.jpg" alt=""></div>
	        <div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/e302538b376615750f5a4e3c660990be.jpg" alt=""></div>
	        <div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/d80940fa8ba6f721f913f48d3490a465.jpg" alt=""></div>
	        <div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/9fcfd07a00a434ecadfd11aea99cade4.jpg" alt=""></div>
	        <div class="swiper-slide"><img src="https://pic.maizuo.com/usr/2022/60015ebeea5a25376639fe3517590280.jpg" alt=""></div>	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination filmPage"></div>
      <!-- 分页器写在旁边:取新类名并设置样式 -->
	</div>
</template>
<script>
// 引入Swiper
import Swiper from "swiper" //js
import "swiper/css/swiper.min.css"//css
export default {
     
  mounted(