上篇,我们完成了城市选择页面顶部的布局。本篇,我们来实现城市选择页面的列表布局。
首先创建一个分支 city-list, pull 下来,在新分支上写代码。
好啦。打开编辑器,在city/components 中创建组件List.vue
初始化一下,List.vue 代码 如下。
<template>
<div class="list">
list
</div>
</template>
<script>
export default {
name: 'CityList'
}
</script>
<style lang="stylus" scoped>
@import '~styles/variables.styl'
</style>
在City.vue 中,引入,如下。
<template>
<div>
<city-header></city-header>
<city-search></city-search>
<city-list></city-list>
</div>
</template>
<script>
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
import CityList from './components/List.vue'
export default {
name: 'City',
components: {
CityHeader,
CitySearch,
CityList
}
}
</script>
<style lang="stylus" scoped>
</style>
最终,List.vue 如下。问题,里面不能拖拽滚动,下篇将解决。
<template>
<div class="list">
<div class="area">
<div class="title border-topbottom">当前城市</div>
<div class="button-list">
<div class="button-wraper">
<div class="button">北京</div>
</div>
</div>
</div>
<div class="area">
<div class="title border-topbottom">热门城市</div>
<div class="button-list">
<div class="button-wraper">
<div class="button">北京</div>
</div>
<div class="button-wraper">
<div class="button">北京</div>
</div>
<div class="button-wraper">
<div class="button">北京</div>
</div>
<div class="button-wraper">
<div class="button">北京</div>
</div>
<div class="button-wraper">
<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 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 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/variables.styl'
.border-topbottom
&:before
border-color: #ccc
&:after
border-color: #ccc
.border-bottom
&:before
border-color: #ccc
.list
position: absolute
top: 1.58rem
left: 0
right: 0
bottom: 0
overflow: hidden
.title
line-height: .44rem
background: #eee
padding-left: .2rem
color: #666
font-size: .26rem
.button-list
overflow: hidden
padding: .1rem .6rem .1rem .1rem
.button-wraper
float: left
width: 33.33%
.button
text-align: center
margin: .1rem
padding: .1rem 0
border: .02rem solid #ccc
border-radius: .06rem
.item-list
.item
line-height: .76rem
padding-left: .2rem
</style>
Done.