Vue2.0 實(shí)現(xiàn)歌手列表滾動及右側(cè)快速入口功能
1 歌手列表
歌手列表頁類似于手機(jī)通訊錄，我們也將其作為一個基礎(chǔ)組件獨(dú)立出來，這部分的邏輯比較簡單，這里不做過多的講解
// 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)擊滾動
同樣是類比于手機(jī)通訊錄，懸浮于屏幕右側(cè)的 A-Z 可以幫助我們快速找到對應(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)擊對應(yīng)字母時，需要獲取其索引，這里我們直接獲取 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)擊之后，我們需要頁面滾動到相應(yīng)位置，這里需要擴(kuò)展 scroll 組件的方法，這里擴(kuò)展的方法都是來自 better-scroll 組件所封裝的方法，這里提一下 scrollToElement 方法的第二個參數(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)我們的手指在右側(cè)快速入口上滑動時，歌手列表也會同步進(jìn)行滾動，當(dāng)我們滾動右側(cè)快速入口時，我們需要阻止歌手列表滾動，以及瀏覽器原生滾動，所以要使用 @touchmove.stop.prevent 阻止冒泡，并且在 onShortcutTouchStart 事件中記錄觸碰點(diǎn)的初始位置，以及 onShortcutTouchMove 事件中觸碰點(diǎn)的位置，通過兩個位置的像素差，來滾動歌手列表
// 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)歌手列表滾動時，我們想要在右側(cè)快速入口中，高亮當(dāng)前顯示的 title ，這就需要我們監(jiān)聽 scroll 組件的滾動事件，來獲取當(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，即會非實(shí)時（屏幕滑動超過一定時間后）派發(fā) scroll 事件，我們在屏幕滑動的過程中，需要實(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)滾動到頂部，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
}
}
// 當(dāng)滾動到底部，且-newY大于最后一個元素的上限
this.currentIndex = listHeight.length - 2
}
},
components: {
Scroll
}
}
</script>
運(yùn)行結(jié)果
5 滾動固定標(biāo)題
當(dāng)我們滾動歌手列表頁時，希望該歌手的 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>
運(yùn)行結(jié)果
該章節(jié)的內(nèi)容到這里就全部結(jié)束了，源碼我已經(jīng)發(fā)到了 GitHub Vue_Music_06 上了，有需要的同學(xué)可自行下載
總結(jié)
以上所述是小編給大家介紹的Vue2.0 實(shí)現(xiàn)歌手列表滾動及右側(cè)快速入口功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue腳手架創(chuàng)建項(xiàng)目時報catch錯誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項(xiàng)目時報catch錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue依賴收集引發(fā)的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
element自定義 多文件上傳 觸發(fā)多次on-change問題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本文主要介紹了解決vue.js not detected的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
通過本文帶領(lǐng)大家去學(xué)習(xí)vue3.0 CLI - 2.5 - 了解組件的三維的相關(guān)知識，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-09-09
這篇文章主要介紹了vue自定義keepalive組件的相關(guān)資料,keep-alive組件是使用?include?exclude這兩個屬性傳入組件名稱來確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-07-07
Vue中實(shí)現(xiàn)權(quán)限控制的方法示例
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限控制的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
多個vue項(xiàng)目實(shí)現(xiàn)共用一個node-modules文件夾
這篇文章主要介紹了多個vue項(xiàng)目實(shí)現(xiàn)共用一個node-modules文件夾，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例
今天小編就為大家分享一篇關(guān)于vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01