Vue 详情模块 3

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情演职人员

目录

详情

演职人员

使用控件

创建组件

导入组件

注册组件

演职人员渲染

头像设置

设置字体

优化

总结

---

详情

演职人员

使用控件

detailView.vue页面中，将演职人员功能封装一个控件。

示例如下：

<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?'&#xe8e3;':'&#xe8ff;'}}</i></div></div><div><div>演职人员</div><detail-swiper></detail-swiper></div></div>
</template>

 

创建组件

在mycomponents文件夹下创建detail文件夹；然后在detail文件夹中

创建两个组件文件分别为：DetailSwiper.vue和DetailSwiperItem.vue。

如下：

 

DetailSwiper文件内容

并设置一页显示多个

代码如下：

<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内容

<template><div class="swiper-slide"><slot></slot></div>
</template>

 

导入组件

在DetailView.vue中导入轮播组件。

示例如下：

import detailSwiper from '@/mycomponents/detail/DetailSwiper'
import detailSwiperItem from '@/mycomponents/detail/DetailSwiperItem'

注册组件

在DetailView.vue中局部注册轮播组件。

示例如下：

export default {data () {return {filmInfo: null,isHide: true}},components: {detailSwiper,detailSwiperItem},

 

演职人员渲染

演职人员列表内容渲染。

示例如下：

<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>

 

头像设置

头像改为背景

<div :style="{backgroundImage: 'url('+ data.avatarAddress +')'}" class="avatar"></div><div>{{data.name}}</div><div>{{data.role}}</div>

头像样式设置

.avatar {width: 100%;height: 4.722222rem;background-position: center;background-size: cover;
}

 

设置字体

通过行内样式设置演职人员名称和角色名称字体样式。

示例如下：

<div style="text-align:center;font-size:12px;">{{data.name}}</div>
<div style="text-align:center;font-size:13px;">{{data.role}}</div>

 

优化

对原有元素创建类，设置样式。

示例如下：

<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?'&#xe8e3;':'&#xe8ff;'}}</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的移动端项目：详情演职人员