老师我的滑不动啊，要哭了 渲染数据后出现的

<template>

<div class="list" ref="wrapper">

<div>

<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" v-for="item of hot" :key="item.id">

<div class="button">{{item.name}}</div>

</div>

</div>

</div>

</div>

<div class="area" v-for="(item,key) of cities" :key="key" :ref="key">

<div class="title border-topbottom">{{key}}</div>

<div class="item-list">

<div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{{innerItem.name}}</div>

</div>

</div>

</div>

</div>

</template>

<script>

import BScroll from 'better-scroll'

export default{

name: 'CityList',

props:{

hot:Array,

cities:Object,

letter:String

},

mounted(){

this.scroll=new BScroll(this.$refs.wrapper)

console.log(this.scroll)

},

watch:{

letter(){

if(this.letter){

const element=this.$refs[this.letter][0]

this.scroll.scrollToElement(element)

}

}

},

updated(){

this.scroll.refresh()

}

}

</script>

<style scoped>

 @import '~styles/varibles.styl'

.border-topbottom

&:before

border-color:#ccc

&:after

border-color:#ccc

.border-topbottom

&:before

border-color:#ccc

.list

overflow:hidden

position:absolute

top:1.58rem

left:0

right:0

bottom:0

.title

line-height:.54rem

background:#eee

padding-left:.2rem

color:#666

font-size:.26rem

.button-list

padding:.1rem .6rem .1rem .1rem

overflow:hidden

.button-wrapper

float:left

width:33.33%

.button

padding .1rem 0

text-align:center

margin:.1rem

border:.02rem solid #ccc

border-radius:.06rem

.item-list

.item

line-height:.76rem

color:#666

padding-left:.2rem

</style>