better-scroll使用

<template>
    <div>
         //滚动视图的父容器,使用定位固定位置 overflow:hiden
         <div class="goods">
           //滚动视图ref 使用better-scroll初始化
           <div class="menu-wrapper" ref="menuWrappers">
                <ul>
                    <li class="menu-item"
                        ref="menuList"
                        v-for="good in goods">
                        <span class="text">{{good.name}}</span>
                    </li>
                </ul>
            </div>
            <div class="food-wrapper">

            </div>
        </div>
    </div>
</template>

<script>
    import order_data from '../../../static/js/orderData'
    import BScroll from 'better-scroll'
    export default {
        data:function () {
          return {
              goods: [],
              listHeight: [],
              scrollY: 0,
              selectedFood: {}
          }
        },
        created:function () {
            console.log(order_data)
            this.goods = order_data.goods;

            this.$nextTick(() => {
               this._initScroll();
            });
        },
        methods:{
            _initScroll:function () {
                this.meunScroll = new BScroll(this.$refs.menuWrappers, {
                    click: true
                });
            }
        }
    }
</script>

<style>
    .goods{
        display: flex;
        position: absolute;
        top: 4px;
        bottom: 50px;
        width: 100%;
        overflow: hidden;
    }
    .goods .menu-wrapper{
        flex: 0 0 80px;
        width: 80px;
        background:#f3f5f7;
    }
    .goods .menu-item{
        display: table;
        height: 50px;
        width: 56px;
        margin-left: 12px;
        line-height: 14px;
    }
    .goods .menu-item .text{
        display: table-cell;
        width: 56px;
        font-size: 12px;
        vertical-align: middle;
        text-align: center;
        border-bottom: 1px solid lightgray;
    }
    .goods .food-wrapper{
        flex: 1;
    }
</style>