Vue2.0 歌手列表滚动及右侧快速入口实现

Unsplash

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue 2.0 的知识和实际应用,还请大家购买课程进行学习实践,该系列博文的发布已得到黄轶老师的授权许可

授权许可

0 系列文章目录

Vue2.0 定制一款属于自己的音乐 WebApp Vue2.0 路由配置及Tab组件开发 Vue2.0 数据抓取及Swiper组件开发 Vue2.0 scroll 组件的抽象和应用 Vue2.0 歌手数据获取及排序 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 上了,有需要的同学可自行下载

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JadePeng的技术博客

jQuery Mobile 教程 (1)

    移动互联网是块诱人的大蛋糕,在手机屏上,到底是C/S横扫一切,还是B/S力争一席之地?我相信,B/S还是很有希望的。在找移动Web App开发的资料,发...

38660
来自专栏Guangdong Qi

iOS开发常用之网络

16010
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

32670
来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

11520
来自专栏Google Dart

Flutte部件目录-Material Components 顶

底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。 BottomNavigationBar小部件实现此组件。

38440
来自专栏计算机编程

【页面效果优化 1】下划线与水波纹

28140
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

36070
来自专栏Coco的专栏

神奇的选择器 `:focus-within`

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

17450
来自专栏菩提树下的杨过

[转自blueidea]像table一样布局div Ⅰ

翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405...

25270
来自专栏程序员宝库

移动端布局攻略

作者:Tolonger 原文链接:https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外,rem布局占据了目前移...

47960

扫码关注云+社区

领取腾讯云代金券