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的移動端項目：詳情基礎內容，日期及電影描述
