11-1.詳情頁-動態路由和banner布局
上一章節我們制作了城市頁面相關的東西,那么這一節我們打算制作咱們最后一部分詳情頁面。
1.詳情頁面動態路由的添加
這一部分的代碼在git@github.com:fx35792/vue-travel.git
倉庫的detail-banner分支上
//router/index.js
import Detail from '@/pages/detail/Detail'
export default new Router({
routes: [
...
{
path: '/detail/:id', //添加動態id
name: 'Detail',
component: Detail
}
]
})
2.詳情頁面banner部分以及點擊banner進入gallery組件的制作
制作這一部分主要是一個Ui的布局以及gallery組件的封裝
Ui布局咱們總結中就不在這個地方就多說了,咱們還是說一下這個gallery公共組件吧
公共組件目錄結構是src/common/gallery/Gallery.vue
<template>
<div class="container" @click="handleCloseGallery">
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in imgs" :key="index">
<img :src="item" class="gallery-img">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template>
<script>
export default {
name: 'CommomGallery',
props: {
imgs: {
type: Array,
default () {
return []
}
}
},
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',
paginationType: 'fraction',
observeParents: true,
observer: true,
autoplay: false
}
}
},
methods: {
handleCloseGallery () {
this.$emit('close')
}
}
}
</script>
<style lang="stylus" scoped>
.container >>> .swiper-container {
overflow: inherit;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
z-index: 999;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
color: #fff;
.wrapper {
height: 0;
width: 100%;
padding-bottom: 100%;
.gallery-img {
width: 100%;
}
.swiper-pagination {
bottom: -1rem;
}
}
}
</style>
在制作gallery過程中注意幾點
1.是布局,通過flex把圖片水平垂直居中
2.圖片輪播,swiperOption的配置
swiperOption: {
pagination: '.swiper-pagination',//顯示輪播底部的點/數字
paginationType: 'fraction', //顯示當前輪播和所有圖片的個數(bullets’ 圓點(默認)、‘fraction’ 分式 、‘progress’ 進度條、‘custom’ 自定義)
observeParents: true,//將observe應用于Swiper的父元素。當Swiper的父元素變化時,例如window.resize,Swiper更新。
observer: true,//當改變swiper的樣式(例如隱藏/顯示)或者修改swiper的子元素時,自動初始化swiper。
autoplay: false //關閉自動輪播
}
3.數據要從父組件傳遞過來,設置數據的類型和默認值為空
4.通過$emit 給父組件傳遞數據
11-2.詳情頁-Header漸隱漸顯效果
這一部分的代碼在git@github.com:fx35792/vue-travel.git倉庫的detail-header分支上
<template>
<div>
<router-link tag="div" to="/" class="header-abs" v-show="showAbs">
<div class="iconfont header-abs-icon"></div>
</router-link>
<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
<router-link to="/">
<div class="iconfont header-fixed-icon"></div>
</router-link>景點詳情
</div>
</div>
</template>
<script>
export default {
name: 'DetailHeader',
data () {
return {
showAbs: true,
opacityStyle: {
opacity: 0
}
}
},
methods: {
handleScroll () {
const top = document.documentElement.scrollTop
console.log('top', top)
if (top > 60) {
let opacity = top / 140
opacity = opacity > 1 ? 1 : opacity
this.opacityStyle = { opacity }
this.showAbs = false
} else {
this.showAbs = true
}
}
},
activated () {
//綁定監聽事件
window.addEventListener('scroll', this.handleScroll)
},
deactivated () {
//卸載監聽事件
window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header-abs {
position: absolute;
z-index: 999;
top: 0.2rem;
left: 0.2rem;
width: 0.8rem;
height: 0.8rem;
line-height: 0.8rem;
border-radius: 50%;
text-align: center;
background: rgba(0, 0, 0, 0.8);
.header-abs-icon {
color: #fff;
font-size: 0.46rem;
}
}
.header-fixed {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
height: $headHeight;
line-height: $headHeight;
background: $bgColor;
text-align: center;
color: #fff;
font-size: 0.32rem;
.header-fixed-icon {
position: absolute;
top: 0;
left: 0;
width: 0.64rem;
text-align: center;
font-size: 0.4rem;
color: #fff;
}
}
</style>
1.兩快頭部的布局很簡單
2.主要是一個是漸變效果:
監聽頁面滾動的高度來控制兩個頭部的顯示和隱藏
監聽滾動的高度動態來改變apacity的值,當apacity的值大于1的時候,始終讓它的值等于1
3.window綁定監聽事件,離開頁面要卸載掉監聽事件
11-3.詳情頁-使用遞歸組件實現詳情列表
遞歸組件是:可以自身調用的組件
使用場景:當數據結構相同的形式嵌套實現的時候
知識點:組件命名方式(DetailList==><detail-list></detail-list>)
1:父組件調用子組件時候使用
2:遞歸組件使用
3:當使用keep-alive的時候,不想緩存某個頁面時,也會用到name
//src/detail/components/List.vue
<template>
<div>
<div class="item" v-for="(item,index) of list" :key="index">
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" class="item-chilren">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailList',
props: {
list: Array
}
}
</script>
<style lang="stylus" scoped>
.item-title-icon {
position: relative;
left: 0.06rem;
top: 0.06rem;
display: inline-block;
width: 0.36rem;
height: 0.36rem;
background: url('http://s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -0.45rem no-repeat; // s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
margin-right: 0.1rem;
background-size: 0.4rem 3rem;
}
.item-title {
line-height: 0.8rem;
font-size: 0.32rem;
padding: 0 0.2rem;
}
.item-chilren {
padding: 0 0.2rem;
}
</style>
//src/detail/Detail.vue
<template>
<div>
<detail-banner :sightName="sightName" :bannerImg="bannerImg" :gallaryImgs="gallaryImgs"></detail-banner>
<detail-header></detail-header>
<div style="height:50rem">
<detail-list :list="list"></detail-list>
</div>
</div>
</template>
<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import axios from 'axios'
export default {
name: 'Detail',
data () {
return {
sightName: '',
bannerImg: '',
gallaryImgs: [],
list: []
}
},
methods: {
getDetailInfo () {
axios
.get('/api/detail.json', {
params: {
id: this.$route.params.id
}
})
.then(this.getDetailSucc)
},
getDetailSucc (res) {
res = res.data
if (res.ret && res.data) {
res = res.data
console.log(res)
this.sightName = res.sightName
this.bannerImg = res.bannerImg
this.gallaryImgs = res.gallaryImgs
this.list = res.categoryList
}
}
},
mounted () {
this.getDetailInfo()
},
components: {
DetailBanner,
DetailHeader,
DetailList
}
}
</script>
<style lang="stylus" scoped></style>
ajax數據的獲取和傳遞 咱們就不在這贅述了,咱們說說在制作這個過程的一些知識點:
1.當我們從首頁的列表頁面點擊進入詳情頁面的時候,會遇到一種這樣的場景,首頁很長的的時候,我們滾動到下面,點擊進入詳情頁面,你會發現,進入的詳情頁面被滑動了距離,而不是最頂部預覽這個頁面的。
那么我們應該如何解決呢?
我們需要在路由的頁面添加一段代碼
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
官網給出我們的解決方案:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
2.因為我們在router-view上使用了keep-alive,那么訪問了的頁面就會被緩存下來,也就會導致,我們第一次請求詳情頁面的時候會走ajax請求,之后就不會了,而這不是我們希望看到的,因為我們點擊每個列表的數據,他們展示的詳情頁面都會不相同,都會把詳情的id寫到詳情頁面的url上面,所以我們期盼的結果就是,每次點擊詳情頁面的時候,都會進行數據ajax請求。
之前我們使用過一種方法,解決過切換不同的城市,首頁進行ajax請求,當時我們處理的方法是在activated
這個生命周期的鉤子上比較上次城市和切換的數據是不是相等,來進行首頁接口的請求的。
那么今天咱們來通過第二種方法來避免keep-alive導致的ajax請求不能發送的問題。
那就是設置一下keep-alive的一個屬性值:exclude
Detail 是 不需要緩存組件的name值
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
11-4.詳情頁-公共組件漸隱漸現FadeAnimation組件的制作
利用的是插槽(slot)和動畫(transition)的知識點
//src/common/fade/FadeAnimation.vue
<template>
<transition>
<slot></slot>
</transition>
</template>
<script>
export default {
name: 'FadeAnimation'
}
</script>
<style lang="stylus" scoped>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 0.5s;
}
</style>
使用
//src/pages/detail/components/Banner.vue
<fade-animation>
<common-gallery :imgs="gallaryImgs" v-show="galleryStatus" @close="handleClickClose"></common-gallery>
</fade-animation>
<script>
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
name: 'DetailBanner',
...
components: {
...,
FadeAnimation
}
}
</script>
更多
上一篇:第10章 Vue項目開發之城市
下一篇:第12章 Vue項目的聯調、測試與發布上線
全篇文章:Vue學習總結
所有章節目錄:Vue學習目錄