Vue.js学习记录-15-Vue去哪儿网项目实战：景点详情页开发-功能点概述 + Detail + Banner(通用组件：Gallery、Fade)

3. 景点详情页开发

• 功能点概述

  • 用户首页点击热销推荐景点，即可跳转景点详情页面。详情页面包括三部分内容：顶部图片展示、景点门票详情、隐藏页面头。(拖动至下方会出现)
    
  • 用户点击顶部图片展示，进入图片轮播区域(全屏)，可左右滑动进行图片浏览，点击图片区域外进行返回景点详情页，过渡动画的使用，图片轮播区域配置首页返回按钮。
    
  • 用户向下拖动景点详情页，即可看见隐藏页面头部，同时具备返回按钮，可以返回至首页。
    
  • 景点门票详情，针对返回的多层数据，进行组件的递归调用展示。

• Detail：城市详情父组件

  • 路由配置

    在该模块中，路由采用了动态参数的形式，进行路由配置，坐标/router/index.js：

      import Detail from '@/pages/detail/Detail'
      {
        // 绑定动态参数
        path: '/detail/:id',
        name: 'detail',
        component: Detail
      }
    

    其中 :id 绑定了动态的URL参数，在组件中可以通过：this.$route.params.id 进行获取

  • 组件管理：

    • 子组件引入及注册：Banner、Header、List

      • 引入

          import DetailBanner from './components/Banner'
          import DetailHeader from './components/Header'
          import DetailList from './components/List'
        

      • 注册

          components: {
              DetailBanner,
              DetailHeader,
              DetailList
          }
        

  • 组件交互：三个交互点

    • 首页热销推荐景点点击路由跳转

      坐标：Home.Recommend，路由跳转时，携带item.id

        
        
          
          
      
            
      {{item.title}}
            
      {{item.desc}}
            查看详情
          
        
      

    • Banner、Header点击返回按钮路由跳转

      坐标：Header，下文详细组件中进行介绍

  • 数据传递：采用axios进行数据传递

    • axios引入

        import axios from 'axios'
      

    • 初始化data

        data() {
          return {
            sightName: '',
            bannerImg: '',
            gallaryImgs: [],
            list: []
          }
        }
      

    • 数据请求

      • 触发数据请求

          //页面渲染时触发方法
          mounted() {
            this.getDetailInfo()
          }
        

      • 数据请求：注意请求拼装URL的方式，前面已经提到了调用动态参数的方法：this.$route.params.id

          methods: {
              getDetailInfo() {
                axios.get('/api/detail.json?', {
                  params: {
                    id: this.$route.params.id
                  }
                }).then(this.handleGetDataSucc)
              },
              handleGetDataSucc(res) {
                res = res.data
                if (res.ret && res.data) {
                  const data = res.data
                  this.sightName = data.sightName
                  this.bannerImg = data.bannerImg
                  this.gallaryImgs = data.gallaryImgs
                  this.list = data.categoryList
              }
            }
          },			
        

    • 数据传递：三个数据项传递给Banner组件、一个数据项传递给List组件

• Banner：景点图片画廊(通用组件)

  写在开头，这一部分要实现的具体功能细节有：

  1. 景点主图片、景点名称、画廊图片数目展示

  2. 点击主图片进入图片画廊，图片画廊可以左右滑动，点击非图片区域可退回景点详情页

  细节1实现：

  根据上文可知，父组件Detail以属性绑定的方式向Banner组件传递了三个数据项，分别是：

  1. sightName：景点名称
  2. bannerImg：景点主图片
  3. gallaryImgs：画廊图片集

  数据获取

    props: {
      sightName: String,
      bannerImg: String,
      gallaryImgs: Array
    },
  

  数据映射渲染：该DOM上绑定了点击事件：handleBannerClick，细节2中会提到。

    
  
        
        
  
            
  
                {{this.sightName}}
            
            
  
                
                {{this.gallaryImgs.length}}
            
        
     
  

  细节2实现：通用组件Gallery、Fade的使用

  在该部分的实现中，将Gallery画廊组件以及Fade简单动画组件做了封装，封装为通用组件，也方便其他组件进行调用。

  Gallery：画廊组件

  关于画廊组件，本质上是Swiper组件，进行了些定制化的配置。比如，铺满全屏，分页器样式，状态检查等。

  关于Swiper组件，详情API及使用方法见：https://3.swiper.com.cn/api/index.html