首先我們要理解，better-scroll的要求

這是官方給出的一張圖，滾動(dòng)條的區(qū)域就在wrapper，而我們的內(nèi)容content則要大于等于滾動(dòng)區(qū)域wrapper的高度，二者均需要指定高度，接下來(lái)我會(huì)分享一些使用邏輯，還有一些bug解決的方法

任何開發(fā)都要考慮復(fù)用問題，所以我把better-scroll單獨(dú)封裝成一個(gè)滾動(dòng)條組件

<template>
<div class="wrapper" ref="wrapper">//類名與外界相同也不要緊，style有個(gè)scoped屬性會(huì)限制作用域的
? <div class="content">
? ? <slot></slot>//把需要滾動(dòng)的區(qū)域都放進(jìn)這個(gè)插槽里面
? </div>
</div>
</template>

//js中

import?BScroll?from?'better-scroll'

export default {
?name: "scroll",
?data(){
? ?return {
? ? ?scroll:null //把scroll對(duì)象存在這個(gè)組件的數(shù)據(jù)里面保留
? ?}
?},
?mounted(){

? ?//new BScroll(指定掛載,對(duì)象要求)
? ?this.scroll=new BScroll(this.$refs.wrapper,{
? ? ?click:true, //better-scroll默認(rèn)會(huì)阻止touch事件，當(dāng)設(shè)置為 true，better-scroll 會(huì)派發(fā)一個(gè) click 事件，我們會(huì)給派發(fā)的 event 參數(shù)加一個(gè)私有屬性?_constructed，值為 true

? ? ?observeDOM :true //這個(gè)如果不設(shè)置，滾動(dòng)條會(huì)失效
? ?})
?}
}

在父組件中，導(dǎo)入并注冊(cè)scroll組件

<NavBar class="nav-bar">
<template v-slot:center><div>購(gòu)物街</div></template>
</NavBar>
<scroll class="wrapper">//滾動(dòng)區(qū)域
? ?<homeswiper :banners="banners" id="homeswiper"></homeswiper>
? ?<homerecommend :recommends="recommends"></homerecommend>
? ?<onlyshow></onlyshow>
? ?<div ?@click="backTop" ?v-show="visible">
? ? ?<reTop></reTop>
? ?</div>
? ?<tabControl :titles="['流行','新款','精選']" class="tabControl"
? ? ? ? ? ? ? ?@clickControl="clickControlMain"
? ?></tabControl>
? ?<goodsList :goodsList="goods[currentGoodsType].list"></goodsList>
</scroll>

css中

.wrapper{
?height: calc(100% - 93px);
?overflow: hidden;
?margin-top: 44px;
}

這里面的content有內(nèi)容自己撐開了，所以本身就具有高度的