Vue2.0 实现歌手列表滚动及右侧快速入口功能
1 歌手列表
歌手列表页类似于手机通讯录,我们也将其作为一个基础组件独立出来,这部分的逻辑比较简单,这里不做过多的讲解
// base/listview/listview.vue <template> <scroll class="listview" :data="data"> <ul> <li v-for="(group, index) in data" :key="index" class="list-group"> <h2 class="list-group-title">{{group.title}}</h2> <ul> <li v-for="(item, index) in group.items" :key="index" class="list-group-item"> <img class="avatar" v-lazy="item.avatar"> <span class="name">{{item.name}}</span> </li> </ul> </li> </ul> </scroll> </template> <script type="text/ecmascript-6"> import scroll from 'base/scroll/scroll' export default { props: { data: { type: array, default: () => [] } }, components: { scroll } } </script> <style scoped lang="stylus" rel="stylesheet/stylus"> @import "~common/stylus/variable" .listview position: relative width: 100% height: 100% overflow: hidden background: $color-background .list-group padding-bottom: 30px .list-group-title height: 30px line-height: 30px padding-left: 20px font-size: $font-size-small color: $color-text-l background: $color-highlight-background .list-group-item display: flex align-items: center padding: 20px 0 0 30px .avatar width: 50px height: 50px border-radius: 50% .name margin-left: 20px color: $color-text-l font-size: $font-size-medium .list-shortcut position: absolute z-index: 30 right: 0 top: 50% transform: translatey(-50%) width: 20px padding: 20px 0 border-radius: 10px text-align: center background: $color-background-d font-family: helvetica .item padding: 3px line-height: 1 color: $color-text-l font-size: $font-size-small &.current color: $color-theme font-weight: bolder .list-fixed position: absolute top: -1px left: 0 width: 100% .fixed-title height: 30px line-height: 30px padding-left: 20px font-size: $font-size-small color: $color-text-l background: $color-highlight-background .loading-container position: absolute width: 100% top: 50% transform: translatey(-50%) </style> // singer.vue <template> <div class="singer"> <list-view :data="singerlist"></list-view> </div> </template> <script type="text/ecmascript-6"> import listview from 'base/listview/listview' export default { ... components: { listview } } </script>
运行结果
2 右侧快速入口_点击滚动
同样是类比于手机通讯录,悬浮于屏幕右侧的 a-z 可以帮助我们快速找到对应的歌手,为此,我们需要获取 title 的集合数组
// listview.vue <div class="list-shortcut"> <ul> <li v-for="(item, index) in shortcutlist" :key="index" class="item">{{item}}</li> </ul> </div> <script type="text/ecmascript-6"> export default { ... computed: { shortcutlist() { return this.data.map((group) => { return group.title.substr(0, 1) }) } } } </script>
运行结果
快速入口出现了之后,我们接下来就为其添加点击事件,当我们点击对应字母时,需要获取其索引,这里我们直接获取 v-for 提供的 index 即可
// listview.vue <ul> <li v-for="(item, index) in shortcutlist" :key="index" @touchstart="onshortcuttouchstart($even, index)" class="item">{{item}}</li> </ul> export default { ... methods: { onshortcuttouchstart(e, index) { console.log(index) } } }
点击之后,我们需要页面滚动到相应位置,这里需要扩展 scroll 组件的方法,这里扩展的方法都是来自 better-scroll 组件所封装的方法,这里提一下 scrolltoelement 方法的第二个参数是动画时间,可根据自身需求进行设置
// scroll.vue methods: { ... scrollto() { this.scroll && this.scroll.scrollto.apply(this.scroll, arguments) }, scrolltoelement() { this.scroll && this.scroll.scrolltoelement.apply(this.scroll, arguments) } }
随后给 scroll 组件添加 ref="listview"
以及歌手列表添加 ref="listgroup"
方便我们调用
// listview.vue export default { ... methods: { onshortcuttouchstart(e, index) { this.$refs.listview.scrolltoelement(this.$refs.listgroup[index], 0) } } }
运行结果
3 右侧快速入口_滑动滚动
当我们的手指在右侧快速入口上滑动时,歌手列表也会同步进行滚动,当我们滚动右侧快速入口时,我们需要阻止歌手列表滚动,以及浏览器原生滚动,所以要使用 @touchmove.stop.prevent
阻止冒泡,并且在 onshortcuttouchstart 事件中记录触碰点的初始位置,以及 onshortcuttouchmove 事件中触碰点的位置,通过两个位置的像素差,来滚动歌手列表
// listview.vue <div class="list-shortcut" @touchmove.stop.prevent="onshortcuttouchmove"> <ul> <li v-for="(item, index) in shortcutlist" :key="index" @touchstart="onshortcuttouchstart($event, index)" class="item">{{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 class="listview"
:data="data"
ref="listview"
:probe-type="probetype"
:listenscroll="listenscroll"
@scroll="scroll">
<ul>
...
</ul>
<div class="list-shortcut" @touchmove.stop.prevent="onshortcuttouchmove">
<ul>
<li v-for="(item, index) in shortcutlist"
:key="index"
:class="{'current':currentindex===index}"
@touchstart="onshortcuttouchstart($event, index)"
class="item">{{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 滚动固定标题
当我们滚动歌手列表页时,希望该歌手的 title 一直显示在顶部,并且滚动到下一个 title 时,新的 title 将旧的 title 顶替掉,这里就需要我们计算一个 title 的高度
// listview.vue
<template>
<scroll class="listview"
:data="data"
ref="listview"
:probe-type="probetype"
:listenscroll="listenscroll"
@scroll="scroll">
...
<div class="list-fixed" ref="fixed" v-show="fixedtitle">
<div class="fixed-title">{{fixedtitle}}</div>
</div>
</scroll>
</template>
<script type="text/ecmascript-6">
import scroll from 'base/scroll/scroll'
const title_height = 28
const anchor_height = 18
export default {
...
data() {
return {
scrolly: -1,
currentindex: 0,
diff: -1
}
},
computed: {
...
fixedtitle() {
if (this.scrolly > 0) {
return ''
}
return this.data[this.currentindex] ? this.data[this.currentindex].title : ''
}
},
watch: {
...
scrolly(newy) {
...
for (let i = 0; i < listheight.length - 1; i++) {
...
if (-newy >= height1 && -newy < height2) {
...
this.diff = height2 + newy
return
}
}
...
},
diff(newval) {
let fixedtop = (newval > 0 && newval < title_height) ? newval - title_height : 0
if (this.fixedtop === fixedtop) {
return
}
this.fixedtop = fixedtop
this.$refs.fixed.style.transform = `translate3d(0,${fixedtop}px,0)`
}
}
}
</script>
运行结果
该章节的内容到这里就全部结束了,源码我已经发到了 github vue_music_06 上了,有需要的同学可自行下载
总结
以上所述是小编给大家介绍的vue2.0 实现歌手列表滚动及右侧快速入口功能,希望对大家有所帮助