文章目录
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()