去哪儿APP vue 2.X —— 开发笔记（三）主页布局

图标区域

图标区域布局

• 总体布局：大盒子设置长宽比，设置好8个小盒子的布局（浮动）。

• 小盒子里放图标会被撑开，图标太大了如何缩小，给小图标下的文字预留空间。

  • overflow：hidden + 定位布局。
  • 给img套一个div，使用定位布局。

• box-sizing: border-box;：元素的总高度和宽度包含内边距和边框(padding 与 border) :

<template>
  <div class="icon">
      <div class="icon-p">
          <div class="icon-back">
            <img class="icon-content" src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/36d99efa6f2aa91f1ec9d18ce57fd5e3.png">
          </div>
          <p class="icon-desc">酒店套餐</p>
      </div>
  </div>
</template>
<script>
export default {
  name: 'HomeIcons'
}
</script>
<style lang="stylus" scoped>
  .icon
    width: 100%
    height: 0
    padding-bottom: 50%
    .icon-p
        position: relative
        overflow: hidden
        float: left
        width: 25%
        height: 0
        padding-bottom: 25%
        .icon-back
            position: absolute
            top: 0
            left: 0
            right: 0
            bottom:.44rem
            box-sizing: border-box
            padding: .1rem
            .icon-content
                display: block
                margin: 0 auto
                height: 100%
        .icon-desc
            position: absolute
            left: 0
            right: 0
            bottom: 0
            height: .44rem
            line-height: .44rem
            text-align: center
</style>

图标区域逻辑

v-for循环列表

用v-for列表循环列出多个icon，简化代码。

页面轮播和计算属性

通过图标的id计算图标所处的页码，每页8个图标，设置一个变量pages也就是计算属性，存放icon，其中处于相同页码的icon放在同一个列表下。页面之间轮播。

p标签内文字过多，多余的文字变成...

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis

• text-overflow 属性规定当文本溢出包含元素时发生的事情。ellipsis显示省略符号来代表被修剪的文本。
• white-space: nowrap规定段落中的文本不进行换行.

<template>
<div class="icon">
  <swiper :options="swiperOption">
    <swiper-slide v-for="(page, index) of pages" :key="index"><!--🍪🍕外层循环，轮播每一页-->
        <div class="icon-p"  v-for="item of page" :key="item.id"><!--🍕内层（列表）循环 放置当前页面的八个icon 简化代码--> 
          <div class="icon-back">
            <img class="icon-content" :src="item.imgUrl" />
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
    </swiper-slide>
  </swiper>
</div>
</template>
<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      swiperOption: {
        autoplay: false
      },
      iconList: [
        {
          id: '001',
          imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/36d99efa6f2aa91f1ec9d18ce57fd5e3.png',
          desc: '酒店套餐'
        }, {
          ...]
    }
  },
  computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages//链表数组，也可理解成二维数组🥩🥩
    }
  }
}
</script>
<style lang="stylus" scoped>
    @import '~style/mixins.styl';
    ......
         .icon-desc
            ellipsis()
</style>

推荐组件HomeRecommend

• 左图右文字，使用flex布局

<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <div class="item border-bottom" v-for="item of list" :key="item.id">
        <img class="item-img" :src="item.imgUrl" />
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </div>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      list: [
        {
          id: '001',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/2201/f7/f708779f6b807a41a3.water.jpg_200x200_952d47d4.jpg',
          title: '北京环球度假区',
          desc: '大片世界 在此成真'
        }, ......]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~style/mixins.styl'
  .title
    margin-top: .2rem
    line-height: .8rem
    background: #eee
    text-indent: .2rem
  .item
    overflow: hidden
    display: flex
    height: 1.9rem
    .item-img
      width: 1.7rem
      height: 1.7rem
      padding: .1rem
    .item-info
      flex: 1
      padding: .1rem
      min-width: 1
      .item-title
        line-height: .54rem
        font-size: .32rem
        ellipsis()
      .item-desc
        line-height: .4rem
        color: #ccc
        ellipsis()
      .item-button
        line-height: .44rem
        margin-top: .16rem
        background: #ff9300
        padding: 0 .2rem
        border-radius: .06rem
        color: #fff
</style>

周末游组件

<template>
  <div>
    <div class="title">周末去哪儿</div>
    <ul>
      <li class="item border-bottom" v-for="item of list" :key="item.id">
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.imgUrl" />
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeWeekend',
  data () {
    return {
      list: [{
        id: '001',
        imgUrl: 'http://img1.qunarzz.com/sight/source/1811/f3/86173f863bef61.jpg_r_640x214_52b003ac.jpg',
        title: '京城周末撒欢',
        desc: '在帝都过周末，不仅仅是城中游！'
      }......]
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~style/mixins.styl'
  .title
    line-height: .8rem
    background: #eee
    text-indent: .2rem
  .item-img-wrapper
    overflow: hidden
    height: 0
    padding-bottom: 37.09%
    .item-img
      width: 100%
  .item-info
    padding: .1rem
    .item-title
      line-height: .54rem
      font-size: .32rem
      ellipsis()
    .item-desc
      line-height: .4rem
      color: #ccc
      ellipsis()
</style>