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都能滚动。但是!不能滚动到最后一项
理想如左图,实际只能滚动到右图的样子。又一次陷入了迷茫。。。