您现在的位置是：网站首页> 编程资料编程资料

小程序实现带索引的城市列表_javascript技巧_

2023-05-24 314人已围观

简介小程序实现带索引的城市列表_javascript技巧_

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

效果

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

代码实现

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

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

整体代码