vue中使用better-scroll初始化成功了就是沒反應

貼上結(jié)構(gòu)代碼:hasVerticalScroll為true，scrollerHeight有值,如果我給class menu-wrapper和foods-wrapper設(shè)置overflow-y:auto;樣式也是完全沒問題的,打印better-scroll初始化也是沒問題的...
補充:發(fā)現(xiàn)個奇怪的問題,我不管是vuex調(diào)用還是重新調(diào)用,不管在生命周期哪個階段去執(zhí)行調(diào)用函數(shù)this.initScroll(),打印都是給我undfined......mounted ()也是...

1.HTML:

<div class="goods">
    <!-- 分類列表,左側(cè)邊欄 -->
    <div class="menu-wrapper" ref="menuScroll">
      <ul>
        <li class="menu-item"></li>
      </ul>
    </div>
    <!-- 商品列表,右側(cè)邊欄 -->
    <div class="foods-wrapper" ref="foodScroll">
      <ul>
        <!-- 專場 -->
        <li class="container-list"></li>
        <!-- 具體分類 -->
        <li class="food-list" v-for="(item,index) in setGoods" :key="index">
          <h3 class="title">{{item.name}}</h3>
          <!-- 具體的商品列表 -->
          <ul>
            <li class="food-item"></li>
          </ul>
        </li>
      </ul>
     
    </div>
<div class="goods">

2.CSS結(jié)構(gòu)代碼,使用的Sass:

.goods{
    display: flex;
    position: absolute;
    top: 190px;
    bottom: 51px;
    overflow: hidden;
    width: 100%;
    
    // 左側(cè)邊欄
    .menu-wrapper{
      flex: 0 0 85px;
      background: #F4F4F4;
      // overflow-y: auto;
      .menu-item{
        padding: 19px 23px 9px 10px;
        border-bottom: 1px solid #E4E4E4;
        position: relative;
      }
     }
     
     // 右側(cè)邊欄
    .foods-wrapper{
      flex: 1;
      .container-list{
        padding: 11px 11px 0 11px;
        border-bottom: 1px solid #E4E4E4;
      }
      .food-list{
        padding: 11px;
        .title{
          height: 13px;
          font-size: 13px;
          background: url('../../assets/btn_yellow_highlighted@2x.png') no-repeat left center;
          background-size: 2px 10px;
          padding-left: 7px;
          margin-bottom: 12px;
        }
        .food-item{
          display: flex;
          margin-bottom: 25px;
          position: relative;
        }
      }
      
     }
     
 

3.JS代碼:

<script>
  import BScroll from 'better-scroll'
  
  export default {
   name: "goods",
   data() {
    return {        
     seteContainers: {},
     setGoods: [],
    }
   },
   methods: {
    initScroll (){  //實例滾動
     new this.BScroll(this.$refs.menuScroll)
     new this.BScroll(this.$refs.foodScroll)
    }
   },
   created (){
    this.http.get('/api/goos').then(response => {
     if(response.data.code == 0){
      this.seteContainers = response.data.data.container_operation_source;
      this.setGoods = response.data.data.food_spu_tags;
       //執(zhí)行滾動
       this.initScroll()
     }
    })
   }        
  }
</script>
    

4.打印的new this.BScroll(this.$refs.menuScroll):