首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 实现歌手列表滚动及右侧快速入口功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

Nian糕

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript document.images实例
May 27 Javascript
基于Jquery的文字自动截取（提供源代码）
Aug 09 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
什么是 AngularJS？AngularJS简介
Dec 06 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
node.js与C语言 实现遍历文件夹下最大的文件，并输出路径，大小
Jan 20 Javascript
Express URL跳转（重定向）的实现方法
Apr 07 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
微信小程序登录换取token的教程
May 31 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
基于axios 的responseType类型的设置方法
Oct 29 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
dict(1) cudnn(1) 字符画(1) 热力图(1) 脚本(1) hook(1) callback(1) RTX 3050 ti(1) Git(3) cudn(1)
You might like
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
Bootstrap每天必学之工具提示（Tooltip）插件
2016/04/26 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
[01:38]完美世界DOTA2联赛（PWL）宣传片：第一站
2020/10/26 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python实现的Kmeans++算法实例
2014/04/26 Python
Python发送Email方法实例
2014/08/21 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Python中的支持向量机SVM的使用（附实例代码）
2019/06/26 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
美国顶级户外凉鞋品牌：Chacos
2017/03/27 全球购物
教师自我评价范例
2013/09/24 职场文书
管理专员自荐信
2014/01/26 职场文书
三年级数学教学反思
2014/01/31 职场文书
测试工程师职业规划书
2014/02/06 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android