小程序实现带索引的城市列表

//用来获取首字母
import py from '../../utils/strChineseFirstPY'
checkCh(ch) {
      let uni = ch.charCodeAt(0);
      //如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数
      if (uni > 40869 || uni < 19968) {
        return ch;
      } //dealWithOthers(ch);
      //检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母
      return (py.oMultiDiff[uni] ? py.oMultiDiff[uni] : (py.strChineseFirstPY.charAt(uni - 19968)));
    }

//用来获取首字母
/**
     * @name: 
     * @test: test font
     * @msg: 
     * @param {*} data 数组
     * @param {*} field 依据那个字段排序
     * @return {*}
     */
    data_letter_sort (data, field) {
      let list = new Array();
      let letter = ''
      for (let i = 0; i < data.length; i++) {
        // 首字母 转 大写英文
        letter = (data[i][field]).substr(0, 1).toUpperCase();
        // 创建 字母 分组
        if (!(letter in list)) {
          list[letter] = new Array();
        }
        // 字母 分组 添加 数据
        list[letter].push(data[i]);
      }
       // 转换 格式 进行 排序；
      let resault = new Array();
      for (let key in list) {
        resault.push({
          letter: key,
          list: list[key]
        });
      }
      resault.sort(function (x, y) {
        return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
      });
      // 转换 数据 格式
      let json_sort = {}
      for (let i = 0; i < resault.length; i++) {
        json_sort[resault[i].letter] = resault[i].list;
      }
      return json_sort;
    },

//获取城市数据的首字母列表
for (let key in this.cityList) {
      let obj = {
        py: key,
        active: false
      }
      if (obj.py == 'A') {
        obj.active = true
      }
      wx.createSelectorQuery().select('#'+ key).boundingClientRect(function(rect){
        obj.top = rect.top     // 节点的上边界坐标
      }).exec()
      //pylist是用来渲染右边索引列表的
      this.pyList.push(obj);
    }

//滑动时间
scroll(e) {
      let scrollTop = e.target.scrollTop
      this.pyList.map(item => {
        if ((scrollTop - item.top)>-76) {
          this.pyList.map(item => {
          //active是用来是否高亮显示
            item.active = false
          })
          item.active = true
          return
        }
      })
    },