Vue2.5 旅游项目实例12 城市选择页-列表布局

创建分支：city-list

拉取到本地并切换分支：

git pull
git checkout city-list

新建List.vue文件：

<template>
<div class="list">
  list
</div>
</template>

<script>
export default {
  name: 'CityList'
}
</script>

把组件添加到City.vue页：

<template>
<div>
  <city-header></city-header>
  <city-search></city-search>
  <city-list></city-list>
</div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    CityList
  }
}
</script>

继续编写List.vue的代码：

<template>
<div class="list">
  <div class="area">
    <div class="title border-topbottom">当前城市</div>
    <div class="button-list">
      <div class="button-wrapper">
        <div class="button">北京</div>
      </div>
    </div>
  </div>
  <div class="area">
    <div class="title border-topbottom">热门城市</div>
    <div class="button-list">
      <div class="button-wrapper">
        <div class="button">北京</div>
      </div>
      <div class="button-wrapper">
        <div class="button">北京</div>
      </div>
      <div class="button-wrapper">
        <div class="button">北京</div>
      </div>
    </div>
  </div>
  <div class="area">
    <div class="title border-topbottom">A</div>
    <div class="item-list">
      <div class="item border-bottom">阿拉尔</div>
      <div class="item border-bottom">阿拉尔</div>
      <div class="item border-bottom">阿拉尔</div>
      <div class="item border-bottom">阿拉尔</div>
      <div class="item border-bottom">阿拉尔</div>
      <div class="item border-bottom">阿拉尔</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'CityList'
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.border-topbottom
  &:before
    border-color: #ccc
  &:after
    border-color: #ccc
.border-bottom
  &:before
    border-color: #ccc
.list
  overflow: hidden
  position: absolute
  top:1.58rem
  left:0
  right:0
  bottom:0
  .title
    line-height: .54rem
    font-size: .26rem
    background: #eee
    color: #666
    padding-left: .2rem
  .button-list
    overflow: hidden
    padding: .1rem .6rem .1rem .1rem
    .button-wrapper
      float:left
      33.33%
      .button
        margin: .1rem
        padding: .1rem 0
        text-align: center
        border: .02rem solid #ccc
  .item-list
    .item
      line-height: 0.76rem
      color: #666
      padding-left: .2rem
</style>

因为在list上加了一个overflow: hidden 和  position: absolute ，这样就会导致页面列表不能滚动拖拽，下面会引用第三方的插件better-scroll