第11章 Vue项目开发之详情

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

上一章节我们制作了城市页面相关的东西，那么这一节我们打算制作咱们最后一部分详情页面。

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

这一部分的代码在[email protected]: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

在制作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渐隐渐显效果

这一部分的代码在[email protected]:fx35792/vue-travel.git仓库的detail-header分支上

效果图

1.两快头部的布局很简单
2.主要是一个是渐变效果：
监听页面滚动的高度来控制两个头部的显示和隐藏
监听滚动的高度动态来改变apacity的值，当apacity的值大于1的时候，始终让它的值等于1
3.window绑定监听事件，离开页面要卸载掉监听事件

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

递归组件是：可以自身调用的组件
使用场景：当数据结构相同的形式嵌套实现的时候
知识点：组件命名方式（DetailList==>）
1：父组件调用子组件时候使用
2：递归组件使用
3：当使用keep-alive的时候，不想缓存某个页面时，也会用到name

//src/detail/components/List.vue







//src/detail/Detail.vue

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值

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

利用的是插槽(slot)和动画(transition)的知识点

//src/common/fade/FadeAnimation.vue

使用

//src/pages/detail/components/Banner.vue

      

更多

上一篇：第10章 Vue项目开发之城市
下一篇：第12章 Vue项目的联调、测试与发布上线
全篇文章：Vue学习总结
所有章节目录：Vue学习目录