去哪儿---项目

沐丶亦

已于 2022-06-06 23:08:14 修改

阅读量124

点赞数

文章标签：前端

于 2022-06-05 23:56:43 首次发布

本文链接：https://blog.csdn.net/m0_69974492/article/details/125138172

版权

去哪儿----amusement/entertainment

一、参考网址

参考网址：https://piao.qunar.com/touch

二、项目前期准备

1.项目初始化安装准备

安装node 以及 npm。
使用码云，创建仓库及项目，使用Git命令：git clone将项目克隆到本地。
全局下安装Vue-cli2，使用webpack，运行命令：vue init webpack test

2.项目重点概念

单文件组件
路由：根据网址的不同，返回不同的页面给用户。
在App.vue中，显示的是：当前路由地址所对应的内容。
即对应router文件下的index.js。
可以设置访问根路径“/”时，对应的组件内容。
单页应用 & 多页应用
（1）单页应用：
单页应用，页面跳转时，JS动态地删除当前页面的内容，然后将新的页面DOM结构渲染出来。（在Vue中，页面的跳转使用：列表页）
（2）多页应用：
多页应用，页面跳转时，后端返回新的HTML页面。

3.项目初始化前期准备

//移动端配置
<meta name="viewport" content="width=device-width,initial-scale=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

//初始化样式，在assets/styles文件夹下，导入reset.css文件，并在main.js中导入
import './assets/styles/reset.css'

//移动端1像素，在assets/styles文件夹下，引入border.css文件，并在main.js中导入。
import './assets/styles/border.css'

//移动端点击300ms延迟问题，安装fastclick
npm install fastclick --save // 安装
import fastclick from 'fastclick' //在main.js中引入fsatclick
fastclick.attach(document.body) //使用fastclick

//全局安装stylus和stylus-loader
npm install stylus  --save
npm install stylus-loader --save

三、首页 home/city/detail

1、首页布局：

1）home：

vue-awesome-swiper 实现带有分页器的轮播效果

 //1）安装vue-awesome-swiper组件
cnpm install vue-awesome-swiper@2.6.7 --save
 //2）在main.js引用组件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
//3)Swiper.vue代码：
<template>
  <div class="homebanner">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

//需要在data中定义以下代码：
data () {
    return {
      swiperOption: {
      //pagination: '.swiper-pagination',loop: true
      //设置小圆点和自动滚动。
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: true,
        speed: 3000 
 	  }
    }
  }

//css 样式
<style scoped lang='stylus'>
//设置.homebanner 里的.swiper-pagination-bullet类型的样式
//  >>>  可以穿透到其它组件 无视scoped的作用
.homebanner >>> .swiper-pagination-bullet {
  background: #fff;
  opacity: 1;
}

.homebanner >>> .swiper-pagination-bullet-active {
  background: #007aff;
  opacity: 1;
}
</style>

注意：图片没有下载完成时，轮播图的高度是0，
为了解决图片突然加载完成导致轮播图被撑开的情况，优化用户体验，
对轮播图的位置进行等比例宽高设置。代码中选用padding-bottom的方式。
用padding-bottom实现固定宽高比: padding-bottom会以宽度为标准撑出高度

实现有分页效果的图标（icon）轮播区域
1）引用iconfont，登录iconfont，并注册账号
2）选中需要的图标到指定的项目中
3）将项目的字体下载到本地
4）在assets/styles中新建iconfont文件夹
5）在main.js文件中引入iconfont.css文件
6）在需要的页面中使用iconfont字体，
把需要填写字体的标签添加iconfont类名

注意：如果多于8个图标的时候，做出一个轮播的效果
可以利用computed属性数组每一项又对应一个8项的数组。

2）city：

在这里插入图片描述

使用router-link实现页面的跳转

<template>
    <div class="cityHeader">
        <div class="header">
            城市选择
            <router-link to="/">
                <div class="iconfont header-back">&#xe624;</div>
            </router-link>
        </div>
    </div>
</template>

城市搜索功能的实现
实现点击字母表某个字母，跳转到相应字母的城市列表项（兄弟组件间联动）
实现拖拽字母表时，城市列表项跟着滚动
( 全局事件：
如果把事件绑定到window上面比如scroll事件，那么在推出这个页面的时候一定要进行解绑，不然在其他的页面也会受到这个事件的影响，造成bug

 mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }

使用函数节流来提高效率( 在一些滚动事件时)

if (this.timer) {
  clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
  const touchY = e.touches[0].clientY - 79
  const index = Math.floor((touchY - this.startY) / 20)
  if (index >= 0 && index < this.letters.length) {
    this.$emit('chooseLetter', this.letters[index])
  }
}, 16)

使用Vuex实现城市列表页面与首页的数据共享，并且实现点击热门城市/城市列表/搜索城市列表，相应的当前城市以及首页城市发生改变
使用keep-alive优化网页性能

3）detail：

使用动态路由跳转页面

 {
      path: '/detail/:id',
      name: 'Detail',
      component: () => import("../components/detail/Detail.vue"),
    },

使用递归组件实现详情页列表
递归组件：组件自身调用组件自身