vue 2.0 实战移动音乐app（六）歌手页面列表滚动 解决无法正确滚动

listview.vue

<template>
  <scroll class="listview" :data='data' ref="listview">
    <ul>
      <li v-for='group in data' class="list-group" :key='group.title' ref='listGroup'>
        <h2 class="list-group-title">{{group.title}}</h2>
        <ul>
          <li v-for='item in group.items' class="list-group-item" :key='item.id'>
            <img class="avatar" v-lazy="item.avatar">
            <span class="name">{{item.name}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="list-shortcut">
      <ul>
        <!-- eslint-disable-next-line -->
        <li v-for='(item, index) in shortcutList' class="item" :data-index='index'>{{item}}</li>
      </ul>
    </div>
  </scroll>
</template>

<script>
import Scroll from 'base/scroll/scroll'
// import {getData} from 'common/js/dom'

export default {
  props: {
    /* eslint-disable */
    data: {
      type: Array,
      default: []
    }
  },
  computed: {
    shortcutList() {
      return this.data.map((group) => {
        return group.title.substr(0, 1)
      })
    }
  },
  components: {
    Scroll
  }
}
</script>

其中.listview的style,position: relative;

.listview
    position: relative
    width: 100%
    height: 100%
    overflow: hidden

此时不能滚动，scrollerHeight:9010、wrapperHeight:9010。

改为position: fixed或者position; absolute都能滚动。但是！不能滚动到最后一项

理想如左图，实际只能滚动到右图的样子。又一次陷入了迷茫。。。

此问题解决！！！

这是由于最外层父容器没有设置相关style的原因

当给singer添加了如图的style后，一切都正常了！

具体地原因，我也说不大清楚。给我的感觉是，元素的relative+overflow可以产生对子元素的限制作用，但是前提是限制的范围需要具体。比如有具体的宽高。在没有给singer设置fixed之前，范围是模糊的，所以listview无法对其子元素产生限制。

希望看见这篇博文的小伙伴有好的见解，留言指导一下~