Vue2.0 實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能
1 歌手列表
歌手列表頁類似于手機(jī)通訊錄,我們也將其作為一個(gè)基礎(chǔ)組件獨(dú)立出來,這部分的邏輯比較簡(jiǎn)單,這里不做過多的講解
// 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>
運(yùn)行結(jié)果
2 右側(cè)快速入口_點(diǎn)擊滾動(dòng)
同樣是類比于手機(jī)通訊錄,懸浮于屏幕右側(cè)的 A-Z 可以幫助我們快速找到對(duì)應(yīng)的歌手,為此,我們需要獲取 title 的集合數(shù)組
// 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>
運(yùn)行結(jié)果
快速入口出現(xiàn)了之后,我們接下來就為其添加點(diǎn)擊事件,當(dāng)我們點(diǎn)擊對(duì)應(yīng)字母時(shí),需要獲取其索引,這里我們直接獲取 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) } } }
點(diǎn)擊之后,我們需要頁面滾動(dòng)到相應(yīng)位置,這里需要擴(kuò)展 scroll 組件的方法,這里擴(kuò)展的方法都是來自 better-scroll 組件所封裝的方法,這里提一下 scrollToElement 方法的第二個(gè)參數(shù)是動(dòng)畫時(shí)間,可根據(jù)自身需求進(jìn)行設(shè)置
// 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"
方便我們調(diào)用
// listview.vue export default { ... methods: { onShortcutTouchStart(e, index) { this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0) } } }
運(yùn)行結(jié)果
3 右側(cè)快速入口_滑動(dòng)滾動(dòng)
當(dāng)我們的手指在右側(cè)快速入口上滑動(dòng)時(shí),歌手列表也會(huì)同步進(jìn)行滾動(dòng),當(dāng)我們滾動(dòng)右側(cè)快速入口時(shí),我們需要阻止歌手列表滾動(dòng),以及瀏覽器原生滾動(dòng),所以要使用 @touchmove.stop.prevent
阻止冒泡,并且在 onShortcutTouchStart 事件中記錄觸碰點(diǎn)的初始位置,以及 onShortcutTouchMove 事件中觸碰點(diǎn)的位置,通過兩個(gè)位置的像素差,來滾動(dòng)歌手列表
// 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>
運(yùn)行結(jié)果
4 右側(cè)快速入口_高亮設(shè)置
當(dāng)歌手列表滾動(dòng)時(shí),我們想要在右側(cè)快速入口中,高亮當(dāng)前顯示的 title ,這就需要我們監(jiān)聽 scroll 組件的滾動(dòng)事件,來獲取當(dāng)前滾動(dòng)的位置
// 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>
我們當(dāng)初給參數(shù) probeType 設(shè)的默認(rèn)值為 1,即會(huì)非實(shí)時(shí)(屏幕滑動(dòng)超過一定時(shí)間后)派發(fā) scroll 事件,我們?cè)谄聊换瑒?dòng)的過程中,需要實(shí)時(shí)派發(fā) scroll 事件,所以在 listview 中將 probeType 的值設(shè)為 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
// 當(dāng)滾動(dòng)到頂部,newY>0
if (newY > 0) {
this.currentIndex = 0
return
}
// 在中間部分滾動(dòng)
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
}
}
// 當(dāng)滾動(dòng)到底部,且-newY大于最后一個(gè)元素的上限
this.currentIndex = listHeight.length - 2
}
},
components: {
Scroll
}
}
</script>
運(yùn)行結(jié)果
5 滾動(dòng)固定標(biāo)題
當(dāng)我們滾動(dòng)歌手列表頁時(shí),希望該歌手的 title 一直顯示在頂部,并且滾動(dòng)到下一個(gè) title 時(shí),新的 title 將舊的 title 頂替掉,這里就需要我們計(jì)算一個(gè) 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>
運(yùn)行結(jié)果
該章節(jié)的內(nèi)容到這里就全部結(jié)束了,源碼我已經(jīng)發(fā)到了 GitHub Vue_Music_06 上了,有需要的同學(xué)可自行下載
總結(jié)
以上所述是小編給大家介紹的Vue2.0 實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理技巧
這篇文章主要介紹了Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理,本文給大家介紹兩種方法一種是借助canvas的封裝的文件壓縮上傳,二是使用compressorjs第三方插件實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11vue中{__ob__: observer}對(duì)象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷方式
這篇文章主要介紹了vue中{__ob__: observer}對(duì)象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式
這篇文章主要介紹了vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08對(duì)vue事件的延遲執(zhí)行實(shí)例講解
今天小編就為大家分享一篇對(duì)vue事件的延遲執(zhí)行實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08Element如何實(shí)現(xiàn)loading的方法示例
本文主要介紹了Element如何實(shí)現(xiàn)loading的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06