vue三级界面使用better-scroll滚动

<template>
    <div class="product-box">
        <van-nav-bar
                title="商品详情"
                leftText="返回"
                leftArrow
                @click-left="backAction"
        />

        <!--滚动视图分为三层1.父容器固定的盒子2.ref初始化betterScroll3.滚动的div-->
        <div class="scrollBox">
            <div class="menuWrappers" ref="menuWrapper">

               <div>

                   <div class="content">
                       1111111
                   </div>
                   <div class="content">
                       2222222
                   </div>
                   <div class="content">
                       3333333
                   </div>
                   <div class="content">
                       4444444
                   </div>
                   <div class="content">
                       5555555
                   </div>
                   <div class="content">
                       666666
                   </div>

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

    </div>
</template>

<script>

    import BScroll from 'better-scroll'
    import $ from '../../../../src/components/Lib/DataService'
    export default {
        data:function () {
            return {
                goods: [],
                listHeight: [],
                scrollY: 0,
                selectedFood: {}
            }
        },
        mounted:function () {
//            this.loadProductDetail();

        },
        created:function () {

            var self = this;
            this.$nextTick(function () {
                setTimeout(function () {
                    self._initScroll();
                },1000)
            })
        },

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

<style>
    <!--三级视图的滚动-->
    .product-box{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 101;
    }
    /*滚动视图的固定容器*/
    .scrollBox{
        display: flex;
        position: absolute;
        top: 50px;
        bottom: 50px;
        left: 0;
        width: 100%;
        overflow: hidden;
    }
    .menuWrappers{
        flex: 0 0 100%;
        width: 100%;
    }
    /*设置子内容的高度*/
    .content{
        width: 100px;
        line-height: 100px;
        height: 100px;
        background: lightgrey;
    }
</style>