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

本文介绍如何在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() 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值