Vue 详情模块 4

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

 

目录

详情

剧照

增加剧照模块

设置轮播显示数量

组件内接收值

轮播冲突

解决

总结

---

详情

剧照

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

增加剧照模块

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

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

示例如下：

<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属性。

示例如下：

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

 

轮播冲突

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

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

如下：

解决

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

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

 组件中设置动态类名

实例化时也改为传递的值

 

调用组件时传递的值 

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

最后效果：

 

总结

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