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