项目中需要可以直接用...

先看效果图：

源码分析：

1、先建立一个city.js保存城市相关数据

如下：

var city = [{
"id": "35",
"provincecode": "150000",
"city": "\u963f\u62c9\u5584\u76df",
"code": "152900",
"initial": "A"
}, {
"id": "38",
"provincecode": "210000",
"city": "\u978d\u5c71\u5e02",
"code": "210300",
"initial": "A"
}, {
"id": "105",
"provincecode": "340000",
"city": "\u5b89\u5e86\u5e02",
"code": "340800",
"initial": "A"
}
...
...
]

2、城市索引

var searchLetter = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]

3、通过城市索引值进行城市分组

function cityList() {
var tempObj = []; //保存分组数据
for (var i = 0; i < searchLetter.length; i++) {
var initial = searchLetter[i];//获取城市索引
var cityInfo = []; //保存数据
var tempArr = {};
tempArr.initial = initial;
for (var j = 0; j < cityObj.length; j++) {
if (initial == cityObj[j].initial) { 
cityInfo.push(cityObj[j]);
}
}
tempArr.cityInfo = cityInfo;
tempObj.push(tempArr);
}
return tempObj;
}

4、导出城市索引和分组数据

5、项目中使用

在onload方法中进行数据的获取，获取城市分组信息和城市索引和每个元素的高度

onLoad: function (options) {
// 生命周期函数--监听页面加载
var searchLetter = city.searchLetter;
var cityList=city.cityList();
//获取设备信息
var sysInfo = wx.getSystemInfoSync();
var winHeight = sysInfo.windowHeight;
//1、添加要匹配的字母范围值 更加屏幕高度设置子元素的高度
var itemH = winHeight / searchLetter.length;
var tempObj = [];
for (var i = 0; i < searchLetter.length; i++) {
var temp = {};
temp.name = searchLetter[i];
temp.tHeight = i * itemH;
temp.bHeight = (i + 1) * itemH;
tempObj.push(temp)
}
this.setData({
winHeight: winHeight,
itemH: itemH,
searchLetter: tempObj,
cityList:cityList
})
},

6、选中时的信息弹窗

searchStart: function (e) {
var showLetter = e.currentTarget.dataset.letter;
var pageY = e.touches[0].pageY;
this.setScrollTop(this,showLetter);
this.nowLetter(pageY,this);
this.setData({
showLetter: showLetter,
startPageY: pageY,
isShowLetter:true,
})
},

7、元素滚动

setScrollTop:function(that,showLetter){
var scrollTop=0;
var cityList=that.data.cityList;
var cityCount=0;
var initialCount=0;
for(var i=0;i<cityList.length;i++){
if(showLetter==cityList[i].initial){
scrollTop=initialCount*30+cityCount*41;
break;
}else{
initialCount++;
cityCount+=cityList[i].cityInfo.length;
}
}

that.setData({
scrollTop:scrollTop
})
},

这里就完结了...

补充：项目结构图：