Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情基础内容，日期及电影描述
目录
详情
详情基础内容
初始化与赋值
渲染基础内容
详情样式
日期处理
安装moment
定义过滤器
使用过滤器
电影描述
总结
详情
详情基础内容
初始化与赋值
初始化时设置变量值为null；在请求获取数据后进行赋值。
示例如下：
import http from '@/util/http'export default {data () {return {filmInfo: null}},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})}
}渲染基础内容
在渲染基础内容时增加判断；动态绑定绑定style。
示例如下：
<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}}</div><div class="detail-text">{{filmInfo.nation}}{{filmInfo.runtime}}分钟</div></div></div>
</template>详情样式
然后设置样式
<style lang="scss" scoped>
.poster {width: 100%;height: 11.666667rem;background-position: center;background-size: cover;
}
.content {padding: .8333333rem;.detail-text {color: #797d82;font-size:13px;margin-top: .222222rem;}
}
</style>
日期处理
安装moment
在Vue项目中，使用Moment.js处理日期和时间。
命令如下：
npm install moment定义过滤器
首先定义时间戳转化为日期的过滤器。
示例如下：
import moment from 'moment'
import Vue from 'vue'
moment.locale('zhe-cn') // 设置成中文
Vue.filter('dataFilter', (date) => {return moment(date * 1000).format('YYYY-MM-DD')
})使用过滤器
使用过滤器处理，时间戳格式化为日期。
示例如下：
<div class="detail-text">{{filmInfo.premiereAt | dataFilter}}</div>电影描述
电影描述显示两行，可以使用设置盒子高度/行高，溢出隐藏。
示例如下：
<div class="detail-text">{{filmInfo.nation}}{{filmInfo.runtime}}分钟
</div>
<div class="detail-text" style="height:30px;line-height:15px;overflow:hidden">{{filmInfo.synopsis}}
</div>如果有显示全简介的需要 就可以把overflow拿出来 设置一个类。
<div class="detail-text" :class="isHide?'hidden':''">{{filmInfo.synopsis}}
</div>增加向下小箭头，详情全部显示与隐藏
export default {data () {return {filmInfo: null,isHide: false}}去掉简介中设置的高度，改为到hidden中设置高度。
.hidden {overflow: hidden;height:30px;
}小箭头切换 向上和向下
<div style="text-align:center" @click="isHide=!isHide"><i class="icon iconfont">{{isHide?'':''}}</i>
</div>总结
Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情基础内容，日期及电影描述
