第11章 Vue項目開發之詳情

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">&#xe696;</div>
    </router-link>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
      <router-link to="/">
        <div class="iconfont header-fixed-icon">&#xe696;</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學習目錄

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容