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

这篇文章主要为大家详细介绍了小程序实现带索引的城市列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现带索引的城市列表的具体代码，供大家参考，具体内容如下

效果

网上找的很多的效果右边的索引不会按左边滑动区域高亮处理所以自己写了个

代码实现

因为我的城市数据没有而项目里先有的是省市区代码数据所以要先处理一下数据
用来获取首字母：

//用来获取首字母 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

处理过后的数据为按首字母排序的一个对象

然后难点就在右边的索引怎么按照左边的区域来进行高亮显示
首先我想的是获取每个字母距离上边的高度然后页面滑动时进行高度判断

//获取城市数据的首字母列表 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         }       })     },

整体代码