vue 2.0 實戰移動音樂app(六)歌手頁面列表滾動 無法正確滾動
阿新 • • 發佈:2018-12-01
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都能滾動。但是!不能滾動到最後一項
理想如左圖,實際只能滾動到右圖的樣子。又一次陷入了迷茫。。。