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


Posted in Javascript onAugust 08, 2018

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>

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

运行结果

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>

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

运行结果

快速入口出现了之后,我们接下来就为其添加点击事件,当我们点击对应字母时,需要获取其索引,这里我们直接获取 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)
    }
  }
}

Vue2.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>

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

运行结果

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>

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

运行结果

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>

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

运行结果

该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Vue_Music_06 上了,有需要的同学可自行下载

总结

以上所述是小编给大家介绍的Vue2.0 实现歌手列表滚动及右侧快速入口功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js里怎么取select标签里的值并修改
Dec 10 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 #Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 #Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 #Javascript
微信小程序wepy框架笔记小结
Aug 08 #Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 #Javascript
JavaScript常见JSON操作实例分析
Aug 08 #Javascript
vue.js与后台数据交互的实例讲解
Aug 08 #Javascript
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
在JavaScript中调用php程序
2009/03/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php实现文件编码批量转换
2014/03/10 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
Add a Table to a Word Document
2007/06/15 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python之re操作方法(详解)
2017/06/14 Python
PyQt5每天必学之布局管理
2018/04/19 Python
详解Python字典的操作
2019/03/04 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Pytorch to(device)用法
2020/01/08 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
Oracle的内存结构(Memory structures)
2015/06/10 面试题
学习标兵获奖感言
2014/02/20 职场文书
反腐倡廉标语
2014/06/24 职场文书
校外活动方案
2014/08/28 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书