List组件
因为后续要使用滚动插件,所以绝对定位布局和overflow: hidden,使屏幕不能拉动
<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 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>
<ul class="item-list">
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
</ul>
</div>
<div class="area">
<div class="title border-topbottom">A</div>
<ul class="item-list">
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
</ul>
</div>
<div class="area">
<div class="title border-topbottom">A</div>
<ul class="item-list">
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
<li class="item">阿拉尔</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'CityList',
props: {
hotCities: Array
}
}
</script>
<style lang="stylus" scoped>
@import "~styles/varibles.styl"
.border-topbottom
&:before
border-color #ccc
&:after
border-color #ccc
.list
overflow hidden
position absolute
top 1.58rem
bottom 0
left 0
right 0
.title
line-height .44rem
background #eee
padding-left .2rem
color #666
font-size .26rem
.button-list
overflow hidden
padding .1rem .6rem .1rem .1rem
.button-wrapper
float left
width 33.33%
.button
margin .1rem
padding .1rem 0
text-align center
border .02rem solid #ccc
border-radius .06rem
.item-list
.item
line-height .76rem
padding-left .2rem
border-bottom .02rem solid #ccc
</style>
最终效果