vue全家桶开发 去哪儿 项目总结

第一种

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
复制代码

width=device-width 宽度为设备宽度
initial-scale=1 初始比例为1
maximum-scale=1 最大比例为1
minimum-scale=1 最小比例为1
user-scalable=no 用户不能进行放大缩小小
复制代码

第二种

引入第三方库fastclick
复制代码

npm install fastclick --save
因为所有页面都要引入，所以在入口处统一引入就可以了import FastClick from 'fastclick'
FastClick.attach(document.body)
复制代码

1px像素问题

红色边框是用border-bottom: 1px solid red;写的，在手机上明显可以看出它不是1px

推荐一种：伪类 + transform

.border1
    height: .5rem
    position: relative
.border1:before
    position: absolute
    top:-.5rem
    left:0
    content: ''
    width:100%
    height:1px
    border-top:1px solid rgba(0,0,0,.3)
    transform: scaleY(0.5)
复制代码

这种方式就是把原先元素的border去掉，然后利用:before或者:after重做border ，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位

样式重置

网上有很多reset.css找一份引入到项目中

首页轮播

占位

可以用下面的css代码对这些可替换资源先进行占位，页面大体框架在第一次渲染后就能呈现给用户，数据获取到后，替换相应的内容就可，就不会出现抖动了

.icon-img
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 100%
复制代码

样式穿透

.icons >>> .swiper-container
  height: 0
  padding-bottom:50%
复制代码

多页

可以用计算属性computed对iconList进行监听：

• 在Home.vue首先定义了iconList:[]通过属性传递给了Icon.vue组件

• 在Icons.vue中通过props接收到了iconList数据

• 使用computed之所以能对iconList监听，是因为刚开始传递过来的iconList是空数组，当获取到数据之后，在传递过来iconList是有值得，iconList一旦发生了变化，computed就能捕捉到

• computed中还有一个计算属性showIconList,它的用途是：

  1，刚开始渲染的时候，由于iconList是一个空数组，直接将空数组渲染上去了

  2，当有了数据之后，又会进行第二次渲染，此时就会看到，轮播始终在最后一页

  3，使用v-if=showIconList是为了不让它在空数组时渲染，而是要等到有数据后在渲染

  4，所以swiper在初次创建是应该要用完整的数据来创建，而不是要空数据创建

代码

<swiper :options="swiperOption">
  <swiper-slide v-for="(page,index) of pages" :key="index" v-if="showIconList">
    <div class="icon" v-for="item of page" :key="item.id">
      <div class="icon-img">
        <img class="icon-img-content" :src="item.iconUrl" alt="">
      </div>
      <p class="icon-desc">{{item.desc}}</p>
    </div>
  </swiper-slide>
</swiper>
computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)          //每页是 8 个，index / 8 能获取到页数
        if (!pages[page]) {     //初始化每一项
          pages[page] = []
        }
        pages[page].push(item)  //变成新数组
      })
      return pages
   },
   showIconList () {
      return this.iconList.length
   }
}
复制代码

城市选择页面

节流

手指在城市字母表中滑动时，会触发无数次handleTouchMove这个函数，这就对性能影响很大

函数节流：通过设定一个时间周期，只要在这个周期内函数就不执行

实现方法

ihandleTouchMove (e) {
  if (this.touchStatus) {
    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('change', this.letters[index])
      }
    }, 10)
  }
}
复制代码

这里设置的周期是10ms，10ms这个代码只会执行一次，大大优化了性能

keep-alive优化请求

只发送一次请求

每次点击城市或者回到首页时，都会重新发送一个ajax请求，因为当路由切换的时候，这个组件就会被重新渲染，组件一被重新渲染，mounted这个钩子函数就会被执行。这样就会对性能造成比较大的影响

Vue 也考虑到了这一点，为我们提供了一个keep-alive的标签

<keep-alive>
   <router-view/>
</keep-alive>
复制代码

路由的内容被加载过一次之后，就把路由的内容放到内存之中，下次在进这个路由的时候不需要再重新渲染组件了，只需你从内容里把以前的内容拿出来显示就可以了

城市改变再发送请求

按照上面这样优化，当我改变城市时，它也不会发送请求，因为这一块用的是内存里的数据，那么这个选择曾是功能就变得有名无实，那该怎么改进呢？

当我们使用了keep-alive标签后，会自动执行钩子函数activated，而mounted钩子函数是不会被执行的

activated () {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
}
复制代码

详情页面

全局事件

详情页绑定了一个全局事件，当我在详情页面中滚动，这个样写没有问题，但是当我去到其他页面，在滚动时，你就会发现，刚刚你绑定在详情页中的滚动事件，在这个页面也被执行了，这肯定是有问题的

其实在我们使用了keep-alive标签后，会有两个生命周期函数分别是：activated、deactivated

activated：页面展示的时候被执行

deactivated：页面被隐藏或者页面即将被替换成新的页面时被执行
复制代码

activated () {
    window.addEventListener('scroll', this.handleScroll)
},
deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
}
复制代码

这段代码是页面被展示的执行scroll，页面被隐藏的时候移除scroll事件

递归组件

递归组件就是在我组件的自身去调用组件的自身

如何实现 一级标题，二级标题，三级标题？

data () {
    return {
        "categoryList": [{
            "title": "成人票",
            "children": [{
                "title": "成人三馆联票",
                "children": [{
                    "title": "成人三馆联票 - 某一销售店"
                }]
            }, {
                "title": "成人五馆联票"
            }]
        }, {
            "title": "儿童票"
        }, {
            "title": "学生票"
        }, {
            "title": "特惠票"
        }]
    }
}
复制代码

对一层标题用v-for来进行循环，二、三层标题该怎么显示出来呢？在写组件的时候，都会写一个name的属性，它其中一个用途就是——递归组件

<div
    class="item"
    v-for="(item, index) of categoryList"
    :key="index"
>
    <div class="item-title">
      <span class="item-title-icon"></span>
      {{item.title}}
    </div>
    <div class="item-title-children" v-if="item.children">  //判断是否有数据中是否有 children 这个属性，如果有就使用递归组件
      <detail-list :categoryList="item.children"></detail-list>     //把 children 传给递归组件
    </div>
 </div>
复制代码

如下图所示：

keep-alive不缓存

在Detail.vue页面中，当我点击了其他景点后，它也是不会发送请求的，那么Detail页面就不会重新渲染了

可以使用keep-alive的exclude属性，给它默认设置为Detail，用途是每次进入Detail页面都会发送请求

<keep-alive exclude="Detail">   //使用 exclude 属性，可以设置不需要缓存的页面
   <router-view/>
</keep-alive>
复制代码

组件中name名字用途