之前在使用vue寫移動端使用better-scroll時，遇到彈性盒布局和滾動條無法同時使用的問題鸥拧，后來發(fā)現(xiàn)原來是沒注意better-scroll布局的原因削解，下面就該問題作出了總結(jié)：
我要實(shí)現(xiàn)的是header和nav部分固定富弦，內(nèi)容區(qū)實(shí)現(xiàn)滾動氛驮，這個時候我們首先要針對頁面進(jìn)行彈性盒布局，然后注意better-scroll的使用：代碼如下
1.假設(shè)整個頁面父級盒子為#app矫废，首先在父級盒子上彈性盒布局
#app{
background: @black2; //背景顏色
.w(375); //寬度樣式
height: 100vh; //高度樣式
display: flex; //設(shè)置彈性盒
flex-direction: column; //彈性盒布局方向
}
2.在需要滾動的盒子上實(shí)現(xiàn)自動高度，假設(shè)盒子為 .recommend
.recommend{
flex: 1; //自動分配剩余高度
overflow: hidden; //超出隱藏
}
- 在項(xiàng)目下安裝better-scroll蛾找，并在需要使用的模塊里引入模塊，初始化
項(xiàng)目下使用npm安裝：
npm install better-scroll
引入模塊：
import BS from 'better-scroll'
初始化并創(chuàng)建：
export default {
methods: {
initBs(){
let wrapper = this.$refs.wrapper
new BS(wrapper,{ })
}
},
mounted() {
this.initBs()
}
}
4.最后最重要的一點(diǎn)是在使用better-scroll模塊時打毛，必須注意的是，內(nèi)容區(qū)域必須要超出外層的容器高度幻枉，這個時候你要注意：你最外層容器的高度設(shè)定，這里假設(shè)外層的容器為.wrapper熬甫，內(nèi)容層為.content,一定要設(shè)定.wrapper的高度小于.content，我的設(shè)置是和父級盒子 .recommend高度一致椿肩，下面展示下html代碼和css代碼讓大家看的更明白：
html代碼：
<div class='recommend'> <!-- 父級盒子 -->
<div class="wrapper" ref="wrapper"> <!-- 外層容器盒子 -->
<div class="content"></div><!-- 內(nèi)容盒子 -->
</div>
</div>
css代碼：
.recommend{
flex: 1;
overflow: hidden;
.wrapper{
height: 100%; //設(shè)置高度與父級一樣，保證內(nèi)容區(qū)域必須要超出外層的容器高度
.content{
.w(375);
}
}
}
