老师，是哪里错了啊，滚动不了啊

<template>

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

        <div>

            <div class="area">

                <div class="title border-topbottom">当前城市</div>

                <div class="buttonlist">

                    <div class="button-wrapper">

                    <div class="button">北京</div>

                    </div>

                </div>

            </div>

            <div class="area">

                <div class="title border-topbottom">热门城市</div>

                <div class="buttonlist">

                    <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>

                <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">B</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">C</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">D</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>

    </div>

</template>

<script>

import Bscroll from 'better-scroll'

export default {

  name: 'CityList',

  mounted(){

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

  }

}

</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 .44rem

            background #eee

            padding-left .2rem

            color #666

            font-size .26rem

        .buttonlist

            overflow hidden

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

            .button-wrapper

                float left

                width 33.33%

                .button

                    padding .1rem

                    text-align center

                    margin .1rem

                    border .05rem solid #ccc

                    border-radius .06rem

        .item-list

            .item

                line-height .54rem

                color #666

                padding-left .2rem

</style>