之前在使用vue写移动端使用better-scroll时，遇到弹性盒布局和滚动条无法同时使用的问题，后来发现原来是没注意better-scroll布局的原因，下面就该问题作出了总结：
我要实现的是header和nav部分固定，内容区实现滚动，这个时候我们首先要针对页面进行弹性盒布局，然后注意better-scroll的使用：代码如下
1.假设整个页面父级盒子为#app，首先在父级盒子上弹性盒布局
#app{
background: @black2; //背景颜色
.w(375); //宽度样式
height: 100vh; //高度样式
display: flex; //设置弹性盒
flex-direction: column; //弹性盒布局方向
}
2.在需要滚动的盒子上实现自动高度，假设盒子为 .recommend
.recommend{
flex: 1; //自动分配剩余高度
overflow: hidden; //超出隐藏
}
- 在项目下安装better-scroll，并在需要使用的模块里引入模块，初始化
项目下使用npm安装：
npm install better-scroll
引入模块：
import BS from 'better-scroll'
初始化并创建：
export default {
methods: {
initBs(){
let wrapper = this.$refs.wrapper
new BS(wrapper,{ })
}
},
mounted() {
this.initBs()
}
}
4.最后最重要的一点是在使用better-scroll模块时，必须注意的是，内容区域必须要超出外层的容器高度，这个时候你要注意：你最外层容器的高度设定，这里假设外层的容器为.wrapper，内容层为.content,一定要设定.wrapper的高度小于.content，我的设置是和父级盒子 .recommend高度一致，下面展示下html代码和css代码让大家看的更明白：
html代码：
<div class='recommend'> <!-- 父级盒子 -->
<div class="wrapper" ref="wrapper"> <!-- 外层容器盒子 -->
<div class="content"></div><!-- 内容盒子 -->
</div>
</div>
css代码：
.recommend{
flex: 1;
overflow: hidden;
.wrapper{
height: 100%; //设置高度与父级一样，保证内容区域必须要超出外层的容器高度
.content{
.w(375);
}
}
}
