better-scroll无法滚动问题

 

无法滚动的时候打印一下scroll对象，看看里面的wrapperHeight是否小于scrollerHeight，如果不小于是不能滚动的，因为hasVerticalScroll表示是否有垂直滚动，如果不小于，那么hasVerticalScroll就是false，所以无法滚动。class为recommend的元素是scroll元素的父元素，它要固定高度为wrapperHeight的高度，如果没有这个父元素直接height：100%，那么wrapperHeight的高度就跟scrollHeight一样，从而无法实现滚动。贴出代码，我因为数据过少而无法滚动，所以复制了一份li，可以忽略。

<template>
  <div class="recommend">
    <scroll ref="scroll" :data="recommendList" class="recommend-content">
      <div>
        <swiper :options="swiperOption" ref="swiperOption" class="swiper" v-if="recommend.length>0">
          <swiper-slide v-for="item in recommend" :key="item.id" class="swiper-slide">
            <a :href="item.linkUrl"><img :src="item.picUrl" class="img"/></a>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <div class="recommendList">
          <h1 class="title">热门推荐歌曲</h1>
          <ul>
            <li v-for="item in recommendList" :key="item.id" class="detailList">
            <div class="detailListImg">
              <img @load="loadImage" :src="item.picUrl" width="60" height="60"/>
            </div>
            <div class="detailText">
              <h2 class="songListDesc">{{item.songListDesc}}</h2>
              <p class="name">{{item.songListAuthor}}</p>
            </div>
          </li>
          <li v-for="item in recommendList" :key="item.id" class="detailList">
            <div class="detailListImg">
              <img :src="item.picUrl" width="60" height="60"/>
            </div>
            <div class="detailText">
              <h2 class="songListDesc">{{item.songListDesc}}</h2>
              <p class="name">{{item.songListAuthor}}</p>
            </div>
          </li>
          </ul>
        </div>
      </div>
    </scroll>
  </div>
</template>

   .recommend
    position: fixed
    width: 100%
    top: 88px
    bottom: 0
    .recommend-content
      height: 100%
      overflow: hidden