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>