2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件支持应用于详情页并实现演职员表与剧照的自动轮播

阅读量：

文章目录

- - - 0.实现效果
  - 1.构建详情页面中用于轮播展示的组件DetailSwiper
  - 2.perView参数设定为可变数值，两个轮拨图各自初始化的方式：对现有类名进行重命名并提取当前类名
  - 3.最终完成的代码及展示效果
  - - 代码
    - 效果

0.实现效果

复制代码

用同一个轮拨组件,详情页多个位置设置轮拨图
    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></slo

全部评论 (0)

还没有任何评论哟~