Vue 详情模块 4

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的移动端项目:详情剧照

相关推荐
tianzhiyi1989sq20 分钟前
Vue3 Composition API
前端·javascript·vue.js
今禾27 分钟前
Zustand状态管理(上):现代React应用的轻量级状态解决方案
前端·react.js·前端框架
用户25191624271128 分钟前
Canvas之图形变换
前端·javascript·canvas
今禾36 分钟前
Zustand状态管理(下):从基础到高级应用
前端·react.js·前端框架
gnip42 分钟前
js模拟重载
前端·javascript
Naturean1 小时前
Web前端开发基础知识之查漏补缺
前端
curdcv_po1 小时前
🔥 3D开发,自定义几何体 和 添加纹理
前端
单身汪v1 小时前
告别混乱:前端时间与时区实用指南
前端·javascript
鹏程十八少1 小时前
2. Android 深度剖析LeakCanary:从原理到实践的全方位指南
前端
我是ed1 小时前
# cocos2 场景跳转传参
前端