2022.9.2

问题1：歌手列表换行排序，当第二行列表不够时，每一项都被等比缩放

原因：列表用了flex：1属性，flex是 flex-grow, flex-shrink 和 flex-basis的缩写，默认0 1 auto，主要原因就是flex-grow：1，第二行的项不够，每一项都被放大了。
解决：把flex-grow设置为0，即如果存在剩余空间，也不放大。
比如如果设置flex：1的话,列表会这样排列( 每个数字代表每个盒子 )：

第一行  1 2 3 4 5
第二行  1   2   3

flex-grow设置为0，,列表会这样排列:

第一行  1 2 3 4 5
第二行  1 2 3

问题2：“组合选择分类”获取歌手列表

解决：目前想到的办法就是分别给方法、变量，比如有三种选项，歌手类型、地区、首字母，给三个全局的方法和变量，存储三种数据，这么做如果种类增加变成5种或者更多，代码会一坨堆在那，原因就在怎么设置一个方法判断当前点击的是哪种选项，这样就不会一旦出现一种选项就多一个全局方法。
vuex中：

  // 当前选择的歌手分类选项
  focus: {
    // 当前选中的类型
    focusType: '-1',
    // 当前选中的地区
    focusArea: '-1',
    // 当前选中的字母
    focusCapital: ''
  }
  // 更新当前选择的歌手类型选项
  UPDATEFOCUSTYPE  (state, value) {
    state.focus.focusType = value
  },
  // 更新当前选择的地区选项
  UPDATEFOCUSAREA  (state, value) {
    state.focus.focusArea = value
  },
  // 更新当前选择的首字母选项
  UPDATEFOCUCAPITAL  (state, value) {
    state.focus.focusCapital = value
  }

实现效果：

tip：粘性定位sticky，固定导航栏；隐藏滚动条用::-webkit-scrollbar{display: none;}