【vue】二、vue2仿去哪儿网app——首页开发

文章目录二、vue2仿去哪儿网app——首页开发Ⅰ 页面结构Ⅱ 开发笔记及注意点1.公共样式抽取2.路径 --> 绝对路径3.用padding-bottom实现固定宽高比4.保证内容不超出父盒子5.axios 获取数据6.实现有分页效果的图标（icon）轮播区域Ⅲ bug解决1.vue-cli引入iconfont报错：2.vue-awsome-swiper修改轮播图pagination颜色问

程序媛小y

663人浏览 · 2022-02-22 05:21:34

程序媛小y · 2022-02-22 05:21:34 发布

文章目录

二、vue2仿去哪儿网app——首页开发

二、vue2仿去哪儿网app——首页开发

Ⅰ 页面结构

景点门票首页

header区域
首页轮播图部分
图标列表区域
热门推荐
周末游部分

在这里插入图片描述

上面的图片包括：header区域，首页轮播图部分，图标列表区域

在这里插入图片描述

Ⅱ 开发笔记及注意点

1.公共样式抽取

一个项目中的主色调，在很多地方都会用到，会出现大量的重复使用现象，—可以把这个颜色单独的放到一个变量中，需要使用的饿地方直接引用就可以，当网站的主色调需要改变的时候，只要改变这个变量的值，全局的主色调都会变化，可维护性将会得到比较大的提升。

变量的创建：在styles目录下创建variables.styl文件，在该文件中设置网站主色调$bgColor = #00bcd4
主色调的使用：比如在Header.vue中使用，首先要在<style></style>标签中引入样式，即@import '../../../assets/styles/variables.styl'，然后在需要设置该颜色的地方使用：background: $bgColor。

另一个抽取的样式是mixins.styl文件，

ellipsis() 
  overflow hidden
  white-space nowrap
  text-overflow ellipsis

这个文件引入后用来将：文本溢出后显示省略号（…）

2.路径 --> 绝对路径

优化目的：很多样式文件或者是组件文件的都需要使用styles目录下的内容，引用时路径中含有重复的部分，比如，在main.js中。

import './assets/styles/reset.css'
import './assets/styles/border.css'
import './assets/styles/iconfont.css'

优化方法：在build目录下的webpack.base.conf.js文件中设置重复路径对应的特殊符号， reslove中有一个叫alias的别名项，里面默认存在一个指向，即：’@’: reslove('src),

所以，我们自定义一个别名：'styles': reslove('src/assets/styles)，

所以，原来重复的位置都可以替换成styles来表示，即

main.js中

    import 'styles/reset.css'
    import 'styles/border.css'
    import 'styles/iconfont.css'

Header.vue中

    <style>
        @import '~styles/variables.styl'
    </style>

3.用padding-bottom实现固定宽高比

将height设置为0，padding-bottom会以宽度为标准撑出高度:
如以下代码：

height :0
padding-bottom :53%

这个方法也可以解决图片的抖动问题。

padding-bottom的百分比值是元素宽和高的百分比，一般搭配 overflow:hidden 和 height:0 在外部div使用，搭配起来的作用是撑开元素的高度，防止加载页面时出现抖动感（例如图片元素未加载出来时下面的其他元素顶了上去）

页面抖动：解决方法： 在<swiper></swiper>外层，套一个div，设置这个div的样式

.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%

4.保证内容不超出父盒子

在一个flex布局中，设置 flex:1,min-width: 0，保证内容不超出外层容器
如果没有设置min-width，当内容大于剩余盒子宽度时会超出父盒子，设置min-width保证内容局限在父盒子内。

5.axios 获取数据

methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }

利用mounted（）函数，当页面挂载成功后，会调用getHomeInfo()函数，获取数据。

如果我们的代码要上线，那我们的地址就要写成/api/index.json类似格式。此时，可以借助webpack-dev-server给我们提供了一个在config文件夹下的index.js中的proxyTable这个代理功能来解决这个问题。

    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite:{
          '^/api': '/static/mock'
        }
      }
    }

此时axios访问的接口表面上是 /api，但实际上是static文件夹下的mock文件夹的文件。

还要注意：static文件夹是可以直接被外部访问到的，因此可以用来存放数据index.json。并且可以在.gitignore文件中设置static文件夹不上传至线上平台。

6.实现有分页效果的图标（icon）轮播区域

当我们想要实现：一个小图标轮播图上显示8个图标，第9个图标放到下一页。

用一个数组存放一页图上的8个小图标。再遍历数组的每一项，得到每一个图片。

1.使用计算属性实现分页功能：list为icon的数据。一页只能有8个图标，**遍历list,当多余8个时，就要放到第二页去，即放到下一个轮播图中。**例如第九个icon,page=Math.floor(9 / 8)=1;说明第九个icon在第1页(页码从0开始算)，这样就生成了带有分页效果的icon轮播区域

 computed: {
    pages () {
      const pages = []
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }

2.之后在swiper-slide中用v-for先遍历pages，生成多个swiper-slide，每个swiper-slide对应一页。在每个swiper-slide中遍历pages中的每个item,生成每页的icon，简单来说就是两个for循环的嵌套。

 <swiper :options="swiperOption">
        <swiper-slide v-for="(page,index) of pages" :key="index">
          <div class="icon" v-for="item of page" :key="item.id">
            <div class="icon-img">
              <img class="icon-img-content" :src="item.imgUrl" />
            </div>
            <p class="icon-desc">{{item.desc}}</p>
          </div>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>