vue实战

功能点概述

用户首页点击热销推荐景点，即可跳转景点详情页面。详情页面包括三部分内容：顶部图片展示、景点门票详情、隐藏页面头。(拖动至下方会出现)

用户点击顶部图片展示，进入图片轮播区域(全屏)，可左右滑动进行图片浏览，点击图片区域外进行返回景点详情页，过渡动画的使用，图片轮播区域配置首页返回按钮。

用户向下拖动景点详情页，即可看见隐藏页面头部，同时具备返回按钮，可以返回至首页。

景点门票详情，针对返回的多层数据，进行组件的递归调用展示。
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组件传递了三个数据项，分别是：

sightName：景点名称
bannerImg：景点主图片
gallaryImgs：画廊图片集
数据获取

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

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

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

Gallery：画廊组件

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

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

：循环数据项、点击事件：handleGallaryClick，控制是否进入景点图片画廊

props: {
imgs: {
type: Array,
// 默认值为空数组
default() {
return []
}
}
},
点击事件：handleGallaryClick，当点击区域时触发点击事件，向父组件(Banner)触发close事件，关闭通用画廊组件。

methods: {
handleGallaryClick() {
// 关闭公共画廊事件
this.$emit(‘close’)
}
},
定制化配置：Swiper3 相关配置 https://3.swiper.com.cn/api/

data() {
return {
swiperOptions: {
pagination: ‘.swiper-pagination’,
// 分式分页器
paginationType: ‘fraction’,
// 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
observeParents: true,
// 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
observer: true
}
}
},
官网API说明： https://3.swiper.com.cn/api/

Fade：简单CSS动画组件

该通用组件实质上为过渡效果的动画组件，之前文章中也提到过，CSS简单的动画过渡效果，这里同一封装为组件方便其他组件使用。

其他组件在使用Fade组件时候，外层嵌套组件标签即可，组件将以插槽的方式包裹在标签内部。

我们回到Banner组件中，引入并使用这两个通用组件。

引入并注册通用组件

import CommonGallary from ‘common/gallary/Gallary’
import FadeAnimation from ‘common/fade/Fade’

components: {
CommonGallary,
FadeAnimation
}
使用通用组件

默认情况下：

data() {
return {
showGallary: false
}
},
点击景点主图片区域时：

handleBannerClick() {
this.showGallary = true
}
点击通用组件Gallary区域时：

handleGallaryClose() {
this.showGallary = false
}
———————————————