web名称索引自制

需求：
将用户通过昵称首字母排序，可使用字母表进行索引

image.png

• 定义索引顺序列表

  abcList = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],

• 定义 dataList 用于存储最终分类排序结果，初始化dataList的数据结构

abcList .forEach((val, index) =>{
  this.dataList.push({
    letter: val,
    list: [],
    index:index,
 })
})

• 需要提取成员昵称的拼音首字母，并且要将成员按首字母分类排序。 将昵称的首字非汉字的成员归入”#”的分类。引入插件pinyin-match，成员昵称的首字母匹配成功，再push到字母对应的数组中

for(let item of resultList) [//resultList 为接口请求得列的成员数组
  let first_letter = item.nickname.substr(0 ,1)
  this.datalist.find( val =>
    if(PinyimMalch.malch(first_letter, val.letter)){
        val.list.push(item);
        return val
    }else if(val.letter == '#'){
         val.list .push(item) ;
    }
   })
}

特殊字符”#”，可替换为其他值，显示的时候换回来即可

• 为索引绑绑定滑动事件