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