Vue结合better-scroll实现滚动条

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

这是官方给出的一张图，滚动条的区域就在wrapper，而我们的内容content则要大于等于滚动区域wrapper的高度，二者均需要指定高度，接下来我会分享一些使用逻辑，还有一些bug解决的方法

任何开发都要考虑复用问题，所以我把better-scroll单独封装成一个滚动条组件

<template>
<div class="wrapper" ref="wrapper">//类名与外界相同也不要紧，style有个scoped属性会限制作用域的
  <div class="content">
    <slot></slot>//把需要滚动的区域都放进这个插槽里面
  </div>
</div>
</template>

//js中

import BScroll from 'better-scroll'

export default {
 name: "scroll",
 data(){
   return {
     scroll:null //把scroll对象存在这个组件的数据里面保留
   }
 },
 mounted(){

   //new BScroll(指定挂载,对象要求)
   this.scroll=new BScroll(this.$refs.wrapper,{
     click:true, //better-scroll默认会阻止touch事件，当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true

     observeDOM :true //这个如果不设置，滚动条会失效
   })
 }
}

在父组件中，导入并注册scroll组件

<NavBar class="nav-bar">
<template v-slot:center><div>购物街</div></template>
</NavBar>
<scroll class="wrapper">//滚动区域
   <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有内容自己撑开了，所以本身就具有高度的