// listview.vue <div @touchmove.stop.prevent="onShortcutTouchMove"> <ul> <li v-for="(item, index) in shortcutList" :key="index" @touchstart="onShortcutTouchStart($event, index)">{{item}}</li> </ul> </div> <script type="text/ecmascript-6"> const ANCHOR_HEIGHT = 18 export default { created() { this.touch = {} }, ... methods: { onShortcutTouchStart(e, index) { let firstTouch = e.touches[0] this.touch.y1 = firstTouch.pageY this.touch.anchorIndex = index this._scrollTo(index) }, onShortcutTouchMove(e) { let firstTouch = e.touches[0] this.touch.y2 = firstTouch.pageY let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0 let anchorIndex = this.touch.anchorIndex + delta this._scrollTo(anchorIndex) }, _scrollTo(index) { this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0) } }, components: { Scroll } } </script>
运行结果
4 右侧快速入口_高亮设置
当歌手列表滚动时，我们想要在右侧快速入口中，高亮当前显示的 title ，这就需要我们监听 scroll 组件的滚动事件，来获取当前滚动的位置
// scroll.vue <script type="text/ecmascript-6"> export default { props: { ... listenScroll: { type: Boolean, default: false } }, methods: { _initScroll() { ... if (this.listenScroll) { let me = this this.scroll.on('scroll', (pos) => { me.$emit('scroll', pos) }) } } } } </script>
我们当初给参数 probeType 设的默认值为 1，即会非实时（屏幕滑动超过一定时间后）派发 scroll 事件，我们在屏幕滑动的过程中，需要实时派发 scroll 事件，所以在 listview 中将 probeType 的值设为 3
// listview.vue
<template>
<scroll
:data="data"
ref="listview"
:probe-type="probeType"
:listenScroll="listenScroll"
@scroll="scroll">
<ul>
...
</ul>
<div @touchmove.stop.prevent="onShortcutTouchMove">
<ul>
<li v-for="(item, index) in shortcutList"
:key="index"
:class="{'current':currentIndex===index}"
@touchstart="onShortcutTouchStart($event, index)"
>{{item}}</li>
</ul>
</div>
</scroll>
</template>
<script type="text/ecmascript-6">
export default {
created() {
...
this.listHeight = []
this.probeType = 3
},
data() {
return {
scrollY: -1,
currentIndex: 0
}
},
methods: {
...
scroll(pos) {
this.scrollY = pos.y
},
_scrollTo(index) {
this.scrollY = -this.listHeight[index]
this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)
},
_calculateHeight() {
this.listHeight = []
const list = this.$refs.listGroup
let height = 0
this.listHeight.push(height)
for (let i = 0; i < list.length; i++) {
let item = list[i]
height += item.clientHeight
this.listHeight.push(height)
}
}
},
watch: {
data() {
this.$nextTick(() => {
this._calculateHeight()
})
},
scrollY(newY) {
const listHeight = this.listHeight
// 当滚动到顶部，newY>0
if (newY > 0) {
this.currentIndex = 0
return
}
// 在中间部分滚动
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i]
let height2 = listHeight[i + 1]
if (-newY >= height1 && -newY < height2) {
this.currentIndex = i
return
}
}
// 当滚动到底部，且-newY大于最后一个元素的上限
this.currentIndex = listHeight.length - 2
}
},
components: {
Scroll
}
}
</script>
运行结果
5 滚动固定标题