Vue 详情模块 4

JSON_L2025-08-04 17:43

Vue 渐进式JavaScript 框架基于Vue2的移动端项目：详情剧照

详情

剧照

详情

剧照

在详情detailView.vue文件中增加剧照。

增加剧照模块

直接复制演职人员全部结构，改为剧照。

修改渲染字段和图片路径，并删除名称和角色名称。

示例如下：

html 复制代码

<div>
   <div class="name">剧照</div>
   <detail-swiper>
   <detail-swiper-item v-for="(data, index) in filmInfo.photos" :key="index">
   <div :style="{backgroundImage: 'url('+ data +')'}" class="avatar"></div>
   </detail-swiper-item>
   </detail-swiper>
</div>

设置轮播显示数量

组件间传值，设置perview动态绑定属性，设置轮播图显示几个。

组件内接收值

在DetailSwiper.vue组件内接收值，设置为数字类型，

并在实例化Swiper时使用perview属性。

示例如下：

javascript 复制代码

export default {
  props: {
    perview: {
      type: Number,
      default: 1
    }
  },
  mounted () {
    new Swiper('.demo', {
      // 设置一页显示多个
      slidesPerView: this.perview,
      spaceBetween: 30,
      freeMode: true
    })
  }
}

轮播冲突

出现问题，单独使用都没问题，现在后面设置2个时，前面演职人员也变成2个。

同页面swiper实例化2次，类名是一样的，后面的就会按照后面的配置重新实例化。

如下：

解决

在原来基础上，增加name传值。

javascript 复制代码

export default {
  props: {
    perview: {
      type: Number,
      default: 1
    },
    name: {
      type: String,
      default: 'demo'
    }
  },

组件中设置动态类名

实例化时也改为传递的值

调用组件时传递的值

html 复制代码

<div class="name">演职人员</div>
        <detail-swiper :perview="3.5" name="actor">

<div class="name">剧照</div>
        <detail-swiper :perview="2" name="photos">

最后效果：

总结

Vue 渐进式JavaScript 框架基于Vue2的移动端项目：详情剧照