https://github.com/ustbhuangyi/better-scroll
<template>
<div class="list" ref="wrapper">
<div class="">
<div class="current">
<div class="current-title">当前</div>
<div class="current-button">正在获取位置信息</div>
</div>
<div class="hot-city">
<div class="hot-title">热门城市</div>
<div class="hot-list">
<div class="hot-button" v-for="item in hotCities" :key="item.id">{{item.city}}</div>
</div>
</div>
<div class="area">
<div class="area-wrapper" v-for="(item,key) in cities" :key="key">
<div class="area-title">{{key}}</div>
<div class="area-list">
<div class="area-button border-bottom" v-for="innerItem in item" :key="innerItem.id">{{innerItem.name}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: "locationList",
data(){
return{
cities:{
"A":[{
id:'00001',
name:'安庆'
},
{
id:'00002',
name:'安顺'
},
{
id:'00003',
name:'安阳'
},
{
id:'00004',
name:'鞍山'
},
{
id:'040005',
name:'鞍山'
},
{
id:'004006',
name:'鞍山'
},
{
id:'00007',
name:'鞍山'
}],
"B":[{
id:'000001',
name:'北京'
},
{
id:'000002',
name:'安顺'
},
{
id:'000003',
name:'安阳'
},
{
id:'000004',
name:'鞍山'
},
{
id:'000005',
name:'安顺'
},
{
id:'0000063',
name:'安阳'
},
{
id:'0000074',
name:'鞍山'
}]
},
hotCities:[{
id:'001',
city:'北京'
},
{
id:'002',
city:'南京'
},
{
id:'003',
city:'天津'
},
{
id:'004',
city:'北京'
}]
}
},mounted(){
const scroll = new BScroll(this.$refs.wrapper,{
click: true,
mouseWheel: {
speed:20,
invert:false,
easeTime:300
}
})
}
}
</script>
<style lang="stylus" scoped>
.border-bottom
&:before
border-bottom:.02rem solid #ccc
.list
overflow:hidden
background-color :#e9ecf1
position:absolute
top:1.12rem
bottom:0
width:100%
z-index:1
.hot-city
overflow :hidden
.current-title,.hot-title,.area-title
margin-left :.4rem
padding :.2rem 0
.hot-title
margin-bottom :-.1rem
.current-button,.hot-button,.area-button
line-height :.44rem
background-color :#fff
text-align: left
border-radius :.1rem
padding :.2rem .2rem
margin-left :.2rem
.current-button
width :84%
.hot-button
text-align :center
float:left
width:15%
margin-top :.2rem
.area-list
background-color:#ffffff
overflow :hidden
.area-button
width:100%
</style>