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

1 歌手列表

歌手列表页类似于手机通讯录，我们也将其作为一个基础组件独立出来，这部分的逻辑比较简单，这里不做过多的讲解

// base/listview/listview.vue



// singer.vue

 

运行结果

2 右侧快速入口_点击滚动

同样是类比于手机通讯录，悬浮于屏幕右侧的 A-Z 可以帮助我们快速找到对应的歌手，为此，我们需要获取 title 的集合数组

// listview.vue

  

    
{{item}}
  

 

运行结果

快速入口出现了之后，我们接下来就为其添加点击事件，当我们点击对应字母时，需要获取其索引，这里我们直接获取 v-for 提供的 index 即可

// listview.vue

  
{{item}}

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

  

    
{{item}}
  

 

运行结果

4 右侧快速入口_高亮设置

当歌手列表滚动时，我们想要在右侧快速入口中，高亮当前显示的 title ，这就需要我们监听 scroll 组件的滚动事件，来获取当前滚动的位置

// scroll.vue

我们当初给参数 probeType 设的默认值为 1，即会非实时（屏幕滑动超过一定时间后）派发 scroll 事件，我们在屏幕滑动的过程中，需要实时派发 scroll 事件，所以在 listview 中将 probeType 的值设为 3

// listview.vue

 

运行结果

5 滚动固定标题

当我们滚动歌手列表页时，希望该歌手的 title 一直显示在顶部，并且滚动到下一个 title 时，新的 title 将旧的 title 顶替掉，这里就需要我们计算一个 title 的高度

// listview.vue

 

运行结果

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

总结

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