第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学习目录

第11章 Vue项目开发之详情

第11章 Vue项目开发之详情

11-1.详情页-动态路由和banner布局

1.详情页面动态路由的添加

2.详情页面banner部分以及点击banner进入gallery组件的制作

11-2.详情页-Header渐隐渐显效果

11-3.详情页-使用递归组件实现详情列表

11-4.详情页-公共组件渐隐渐现FadeAnimation组件的制作

更多

推荐阅读更多精彩内容