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

相关推荐
北鸟南游4 分钟前
用现有bootstrap的模板,改造成nuxt3项目
前端·bootstrap·nuxt.js
前端老鹰5 分钟前
JavaScript Intl.RelativeTimeFormat:自动生成 “3 分钟前” 的国际化工具
前端·javascript
梦想CAD控件6 分钟前
(在线CAD插件)网页CAD实现图纸表格智能提取
前端·javascript·全栈
木子雨廷23 分钟前
Flutter 开发一个plugin
前端·flutter
重生之我是一名前端程序员26 分钟前
websocket + xterm 前端实现网页版终端
前端·websocket
sorryhc27 分钟前
【AI解读源码系列】ant design mobile——Space间距
前端·javascript·react.js
uhakadotcom41 分钟前
NPM与NPX的区别是什么?
前端·面试·github
GAMC1 小时前
如何修改node_modules的组件不被install替换?可以使用patch-package
前端
页面仔Dony1 小时前
webpack 与 Vite 深度对比
前端·前端工程化
Juchecar1 小时前
Vue3 组件生命周期详解
前端·vue.js