vue慕课网音乐项目手记：14-快速入口布局

第一：通过computed来获取列表

computed: {
    shortcutList () {
      return this.data.map((group) => {
        return group.title.substr(0, 1)
      })
    }
  },

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

然后dom和样式如下:

<div class="list-shortcut">
    <ul>
      <li v-for="(item, index) in shortcutList" :key="index" class="item">{{item}}</li>
    </ul>
</div>

.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

需求

需求1完成：

scroll向外暴露的方法：

需求2：滚动到指定地方：

需求3的实现：

最后

这一章节的逻辑比较复杂。