Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情演职人员
目录
详情
演职人员
使用控件
detailView.vue页面中，将演职人员功能封装一个控件。
示例如下：
html
<template>
<div v-if="filmInfo">
<div :style="{
backgroundImage: 'url('+filmInfo.poster+')'
}" class="poster"></div>
<div>{{filmInfo.name}}</div>
<div>
<div class="detail-text">{{filmInfo.category}}</div>
<div class="detail-text">{{filmInfo.premiereAt | dataFilter}}</div>
<div class="detail-text">{{filmInfo.nation}}
{{filmInfo.runtime}}分钟
</div>
<div class="detail-text" :class="isHide?'hidden':''">
{{filmInfo.synopsis}}
</div>
<div style="text-align:center" @click="isHide=!isHide">
<i class="icon iconfont">{{isHide?'':''}}</i>
</div>
</div>
<div>
<div>演职人员</div>
<detail-swiper></detail-swiper>
</div>
</div>
</template>创建组件
在mycomponents文件夹下创建detail文件夹；然后在detail文件夹中
创建两个组件文件分别为：DetailSwiper.vue和DetailSwiperItem.vue。
如下：
DetailSwiper文件内容
并设置一页显示多个
代码如下：
html
<template>
<div class="swiper-container demo">
<div class="swiper-wrapper">
<slot></slot>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
props: {
},
mounted () {
new Swiper('.demo', {
// 设置一页显示多个
slidesPerView: 3,
spaceBetween: 30,
freeMode: true
})
}
}
</script>DetailSwiperItem.vue内容
html
<template>
<div class="swiper-slide">
<slot></slot>
</div>
</template>导入组件
在DetailView.vue中导入轮播组件。
示例如下：
javascript
import detailSwiper from '@/mycomponents/detail/DetailSwiper'
import detailSwiperItem from '@/mycomponents/detail/DetailSwiperItem'注册组件
在DetailView.vue中局部注册轮播组件。
示例如下：
javascript
export default {
data () {
return {
filmInfo: null,
isHide: true
}
},
components: {
detailSwiper,
detailSwiperItem
},演职人员渲染
演职人员列表内容渲染。
示例如下：
html
<div>
<div>演职人员</div>
<detail-swiper>
<detail-swiper-item v-for="(data, index) in filmInfo.actors"
:key="index">
<img :src="data.avatarAddress" alt="">
<div>{{data.name}}</div>
<div>{{data.role}}</div>
</detail-swiper-item>
</detail-swiper>
</div>头像设置
头像改为背景
html
<div :style="{
backgroundImage: 'url('+ data.avatarAddress +')'
}" class="avatar"></div>
<div>{{data.name}}</div>
<div>{{data.role}}</div>头像样式设置
css
.avatar {
width: 100%;
height: 4.722222rem;
background-position: center;
background-size: cover;
}设置字体
通过行内样式设置演职人员名称和角色名称字体样式。
示例如下：
html
<div style="text-align:center;font-size:12px;">{{data.name}}</div>
<div style="text-align:center;font-size:13px;">{{data.role}}</div>优化
对原有元素创建类，设置样式。
示例如下：
html
<template>
<div class="content" v-if="filmInfo">
<div :style="{
backgroundImage: 'url('+filmInfo.poster+')'
}" class="poster"></div>
<div class="film-name">
<div class="name">{{filmInfo.name}}</div>
<div class="detail-text">{{filmInfo.category}}</div>
<div class="detail-text">{{filmInfo.premiereAt | dataFilter}}</div>
<div class="detail-text">{{filmInfo.nation}}
{{filmInfo.runtime}}分钟
</div>
<div class="detail-text" :class="isHide?'hidden':''">
{{filmInfo.synopsis}}
</div>
<div style="text-align:center" @click="isHide=!isHide">
<i class="icon iconfont">{{isHide?'':''}}</i>
</div>
</div>
<div class="actors">
<div class="name">演职人员</div>
<detail-swiper>
<detail-swiper-item v-for="(data, index) in filmInfo.actors" :key="index">
<div :style="{
backgroundImage: 'url('+ data.avatarAddress +')'
}" class="avatar"></div>
<div style="text-align:center;font-size:12px;">{{data.name}}</div>
<div style="text-align:center;font-size:13px;">{{data.role}}</div>
</detail-swiper-item>
</detail-swiper>
</div>
</div>
</template>
<script>
import http from '@/util/http'
import moment from 'moment'
import Vue from 'vue'
import detailSwiper from '@/mycomponents/detail/DetailSwiper'
import detailSwiperItem from '@/mycomponents/detail/DetailSwiperItem'
moment.locale('zhe-cn') // 设置成中文
Vue.filter('dataFilter', (date) => {
return moment(date * 1000).format('YYYY-MM-DD')
})
export default {
data () {
return {
filmInfo: null,
isHide: true
}
},
components: {
detailSwiper,
detailSwiperItem
},
created () {
// 当前匹配的路由
console.log('created', this.$route.params.id)
// axios 利用 id发请求到详情接口，获取详情数据，布局页面
http({
url: `/api/gateway?filmId=${this.$route.params.id}&k=6027054`,
headers: {
'X-Host': 'mall.film-ticket.film.info',
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777","bc":"130100"}'
}
}).then(res => {
// console.log(res.data)
this.filmInfo = res.data.data.film
})
}
}
</script>
<style lang="scss" scoped>
.poster {
width: 100%;
height: 11.666667rem;
background-position: center;
background-size: cover;
}
.content {
padding: .8333333rem;
.film-name {
margin-top:12px;
}
.actors {
margin-top:10px;
}
.name {
color: #191a1b;
font-size: 18px;
height: 24px;
line-height: 24px;
margin-right: 7px;
}
.detail-text {
color: #797d82;
font-size:13px;
margin-top: .222222rem;
}
}
.hidden {
overflow: hidden;
height:30px;
}
.avatar {
height: 4.722222rem;
background-position: center;
background-size: cover;
}
</style>效果：
总结
Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情演职人员