# qunar-demo

**Repository Path**: renjiediling/qunar-demo

## Basic Information

- **Project Name**: qunar-demo
- **Description**: vue2.0 实现的仿去哪儿网
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-08-09
- **Last Updated**: 2022-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目简介

本项目是参考[“去哪儿网”](https://www.qunar.com/)实现，包含有首页、城市列表、景点详情三个页面。
实现了首页轮播、城市选择、搜索城市以及景点图片画廊等功能。后端部分待实现，后续会继续完善本项目！

## 技术栈

- Vue 全家桶
- axios
- sweiper

## 功能模块

### 首页

首页部分包括 Header、Swiper、Icons、Recommend、Weekend 等五个子组件。  
![home](./travel/screenshots/home.jpg)

1. 轮播功能：本项目使用的是轮播组件：**vue-awesome-swiper**，具体的使用可以参考官方文档。如果出现如下报错，检查下 swiper 版本版本是否高于 6.0.0，高于 6.0.0 需 import 'swiper/swiper-bundle.css'方式引入样式;低于 6.0.0 import 'swiper/css/swiper.css'引入样式。

```
npm install --save swiper/dist/css/swiper.css
```

2. icons 图标列表： 图标展示区域每页最多只展示 8 个图标，因此需要对原始的图标数据数组进行分组（改一维数组为二维数组)。分为多组图标后，使用轮播 swiper 组件展示。

### 城市列表

城市列表包含有 CityHeader、Search、CityList 和 Alphabet 等四个子组件。

![city](./travel/screenshots/city.jpg)

1. 首页和城市列表页面都需要用到“当前城市”的数据，在城市列表变更当前城市后，首页的城市定位也应当一同改变，因此使用 Vuex 管理状态。
2. 点击右侧的字母索引，城市列表会跳转到对应首字母的城市。在字母索引上滑动也可以跳转到对应首字母城市。这部分功能的具体实现我另写了篇文章：[实现移动端城市列表，首字母索引跳转](https://juejin.cn/post/7079764854289989645)

### 景点详情

景点详情页面包含有 Banner、DeatilHeader、DetailList 和 Gallary 等四个子组件。

![detail](./travel/screenshots/detail.jpg)

1. 递归组件使用：景点门票可能存在大小门票，大小票具有相同的模板结构，因此只需要将数据分层即可重复地使用门票组件。
2. 头部渐隐渐现效果：往下滚动时显示，往上滚动隐藏。使用自定义指令监听页面的滚动事件，动画效果使用的是 Animate.css。
3. 景点图片画廊功能：也是使用的轮播组件 sweiper

![gallary](./travel/screenshots/gallary.gif)