移动端 better-scroll和弹性盒子布局问题

之前在使用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);
    }
  }
}