better-scroll的使用

1.安装better-scroll

cnpm install better-scroll --Save

2.template部分：列表外边要包裹一个div.wrapper。

<template>
    <div class="list" ref="wrapper">
        <ul>
            <li class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">北京</div>
                    </div>
                </div>
            </li>
            <li class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">北京</div>
                    </div>
                </div>
            </li>
            <li 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>
            </li>
        </ul>
    </div>
</template>

3.script部分

<script>
// 引入better-scroll
import Bscroll from 'better-scroll';
export default {
    name: 'CityList',
    mounted () {
        this.scroll = new Bscroll(this.$refs.wrapper)
    }
}
</script>