Travel项目介绍

全局通过npm搭建vue的脚手架

npm install -g @vue/cli-init

开发使用的是单页应用：

整体页面通过路由构建，并使用路由进行跳转

开发之前注意：

1. 需重定义浏览器默认样式，HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式，这里选择的是reset.css，通过在入口文件main.js中引入
2. 解决1像素的问题，通过使用border.css，同样也是在main.js中引入
3. 手机端的页面适配，使用

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

4. 解决3000毫秒延迟问题，全局安装fastclick，并main.js引入

   npm install fastclick --save

5. 安装css预处理器stylus

   npm install stylus --save
   npm install stylus-loader --save

    注意：1rem相对reset.css中的font-size:50px ，1rem=50px

    750px大小设备当中1rem=100px;
   在375px大小的设备中 1rem=50px;

   举个栗子：ui设计师设计的像素尺寸是根据750px，1rem=100px设计的，但是我的实际屏幕尺寸是375px，设计师的根据750px设计了86px，在我的375px尺寸也就是43px像素，又因我的1rem=50px，所以43px=0.86rem

6. 安装轮播插件

npm install vue-awesome-swiper@2.6.7 --save

 在main.js中引入插件

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'


import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

7.安装axios（跨域插件）

npm install axios --save

然后在home引用axios，并使用

import axios from 'axios'

8.安装better-scroll(滚动插件)

npm install better-scroll  --save

然后在list引用better-scroll，并使用 

import Bscroll from 'better-scroll'

 

全部页面：  

• 首页Home

创建子组件header，export 定义name

在首页import引入子组件，components定义这个子组件的名字，在template使用这个子组件

header组件：

css使用display：flex，两边设置宽度，中间flex:1自然撑开

main.js引入css图标

Swiper组件：

使用插件

图标Icons组件：

在图标区域使用轮播插件的时候，数据超出8个之后，无法滑动显示再页面上，使用计算属性的方法

computed: {
    pages (){
      const pages=[]
      this.iconList.forEach((item,index)=>{  //iconList图标的数据目录
        const page=Math.floor(index/8)
        if(!pages[page]){
          pages[page]=[]
        }
        pages[page].push(item)
      })
      return pages;
    }
  }

• 城市选择页List 

Header:

Search:

点击弹出一个固定框，不点击框被隐藏

在搜索框定义一个model，props把父组件的数据cities传过来（数据双向绑定）

<div v-model="keyword"></div>

<li v-for="item of list">{{item.name}}</li>


props:{ 
    cities:Object 
},

data(){
    return{
      keyword:'',
      list:[],
      timer:null
    }
  }

监听这个搜索框，一旦发生改变就触发

watch: {
    keyword(){
     //函数节流
      if(this.timer){
         clearTimeout(this.timer)
      }
      //当数据为空的时候，返回li变为空不显示文字
      if(!this.keyword){
        this.list=[]
        return
      }
      this.timer=setTimeout(()=>{
        const result=[]
        for(let i in this.cities){
          this.cities[i].forEach((value)=>{
            //搜索关键词或拼音
            if(value.spell.indexOf(this.keyword) >-1||value.name.indexOf(this.keyword) >-1){
              result.push(value)
            }
          })
        }
        this.list=result //赋给list
      },100)
    }
  },

实现滚动远离和之前的一样

List

Alphabet

 

• 首页详情页detail

haeder图片

1.头部的图片使用固定定位

.banner-header
    position:relative
    //图片区域
    .header-wrap
      overflow:hidden
      height:0
      width :100%
      padding-bottom:55%

2.图片里还有一个详情图片，使用flex，上下居中，主轴为垂直方向，起点在上沿

.container
    display :flex
    flex-direction:column
    justify-content:center
    z-index:55
    position:fixed

再使用轮播插件，swiper完成

3.详情文字

使用递归组件

<div v-if="item.children" class="item-children">
   <detail-list :list="item.children"></detail-list>
</div>

公共变量

比如共用一个背景颜色：

创建一个01.styl

$bgColor:#00bcd4  //颜色

//超出显示省略号
ellipsis()
 overflow :hidden
 white-space :nowrap
 text-overflow :ellipsis

在任意地方使用

<style lang="stylue" scoped> //只针对该代码块起作用
@import '01.styl'    //@符号代表的是src这个目录
.box
  background-color:$bgColor
  ellipsis()  

</style> 

自定义别名路径

那么在css中使用的时候

<style lang="stylus" scoped>
@import '~style/varibles.styl'

</style>

 main.js中使用

解决轮播抖动问题

<template>
    <div class="swipper">
        <swiper-slide></swiper-slide>
        <swiper-slide></swiper-slide>
        <swiper-slide></swiper-slide>

        <div class="swiper-pagination"  slot="pagination"></div>
    </div>
</template>

<style>
    .swipper{
        overflow:hidden;
        width:100%;
        height:0;
        padding-bottom:31.25%
    }
</style>

解决li标签的间隙问题：

在父级添加font-size:0，同时设置li的文字大小

解决在css无法修改插件中的css问题

.title>>>.iconfont
       color:#FF0000
       font-size:0.35rem

axios跨域插件的使用：

先在vue文件引入：

<script>
import axios from 'axios'
export default{  //使用
     methods:{
         getHomeInfo(){
           axios.get('/static/mock/index.json')  //路径
          .then(this.getHomeInfoSucc)
         },
         getHomeInfoSucc(res){
            console.log(res)
         }
     },
     mounted(){
         this.getHomeInfo()  //vue生命周期
}
</script>

axios获取数据问题

使用axios获取轮播index.json的数据时,默认显示的是四个图片，解决方法，v-if="list.length" ,如果获取的数据是0的时候，不创建，等获取全部数据时才创建

<template>
    <div>
        <swiper v-if="shopSwiper">
    </div>
</template>

export default{  
    computed:{
        shopShow(){
            return this.list.lenght
        }
    }
}

不想上传的文件时

在.gitignore这里把不想上传的文件写入，比如不想上传static文件里的mock，直接写static/mock

 

使用插件滚动插件的问题

可以滚动，多出去的高度会撑出去，想要在固定区域实现滚动，需要在外层设置绝对定位，里层不设置定位

.search
    overflow :hidden
    position:absolute
    top:1.58rem
    left:0
    right:0
    bottom:0

使用循环输出时，ref获取问题

使用ref时，如果为循环输出，获取的是一个数组，不是一个dom，那么scroll就无法使用，解决方法，加[0]

<!-- 选择城市 -->
<div class="area" v-for="(item,key) of cities" :key="key" :ref="key"></div>

<script>
    watch:{
    letter(){
      if(this.letter){
        const element=this.$refs[this.letter][0] //这样获取的是一个dom
        this.scroll.scrollToElement(element) //滚动到相应的dom区域
      }
    }
  }
</script>

搜索页面一直显示、为空或者没有相应数据问题

1.在li的整体大框的div上加v-show=“keyword”，当keyword有值时才显示

<div class="search-content" ref="search" v-show="keyword"></div>

2.搜索框为空时,在watch监听设置

watch:{
    keyword(){
     //函数节流
       if(this.timer){
          clearTimeout(this.timer)
       }
      //当数据为空的时候，返回li变为空不显示文字
      if(!this.keyword){
        this.list=[]
        return
      }
      ......
    }
}

3.当没有找到相应的数据时，加一个li

<li class="seach-item" v-show="!list.length">没有找到相应数据</li>

在猜我喜欢页加会使标签里面的文字颜色发生改变问题

直接把li标签替换成router-link，再到里面加上tag="li"

<ul>
   <router-link
     tag="li"
     :to="'/detail/' +item.id"
     class="item"
     v-for="item of recommend"
     :key="item.id"
   >

      ......
   </router-link>
</ul>

详情页中，头部的图片点击进去后轮播问题

轮播图片默认是隐藏的，点击进去之后显示的时候，轮播组件会宽度计算会出现问题

解决方法

swiperOption: {
        pagination:'.swiper-pagination',
        paginationType:'fraction',
        loop: true, //循环轮播

       //当监听到swiper发生改变的时候，自我刷新
        observeParents:true,  
        observer:true
}