我们今天主要实现如下需求：
1.页面布局。
2.进入页面自动定位当前所在的城市。
3.获取全国城市列表，并且按照拼音的首字母排序。
4.点击后获取对应的经纬度。
5.点击字母跳转到同一类拼音首字母开始的列表。
WXML
当前定位城市：{{citySelected}}
热门城市
{{item.fullname}}
{{idx}}
{{item.fullname}}
{{item == 'hot' ? "★" : item}}
JS
onLoad: function() {
var that = this;
var myAmapFun = new amapFile.AMapWX({key:'高德Key'});
myAmapFun.getRegeo({
success: function(data){
//成功回调，获得当前所在城市名称
let city = data.regeocodeData.addressComponent.province;
},
fail: function(info){
//失败回调
console.log(info)
}
})
}, //选择城市
selectCity: function (e) {
var dataset = e.currentTarget.dataset;
this.setData({
citySelected: dataset.fullname,
location: {
latitude: dataset.lat,
longitude: dataset.lng }
});
} //获取点击的字母，在页面放大上展示
getPy: function (e) {
this.setData({
hidden: false,
showPy: e.target.id,
})
},
//将设置到字母，赋值到scrollTopId
setPy: function (e) {
this.setData({
hidden: true,
scrollTopId: this.data.showPy })
},
我们看到我们使用了小程序的scroll-view组件，我们将scrollTopId这个值赋值给了scroll-into-view属性，
scroll-with-animation="true" 并且滚动时有滑动效果。
我们为列表中的索引添加了属性id。
第二个问题，为什么绑定2个事件，而不是一个点击事件bindtap
这里关系到我们下一个需求，就是我们手指点击索引那一栏之后，不离开，通过上下滑动，可以快速预览城市列表，当手指离开之后，列表滚动到手指最后停留的那个字母位置。
而且，我们必须将滑动的交互事件绑定到字母索引的外层，就像我们看到的这样：
{{item == 'hot' ? "★" : item}}
当我们将getPy有setPy合并到一个事件中时，我们将无法看到索引字母在页面中间的效果，当我们手指触摸到的时候显示，离开的时候消失，这里是2个事件。
就像这样，中间字母的预览效果。
如果我们将这2个事件合并到父元素上时，我们将很难获取到准确的字母索引值，也就是id。
我们在父元素上添加了三个事件，
//滑动时
tMove: function (e) {
var y = e.touches[0].clientY,
offsettop = e.currentTarget.offsetTop,
that = this;
//判断选择区域,只有在选择区才会生效
if (y > offsettop) {
var num = parseInt((y - offsettop) / 12);
this.setData({
showPy: that.data._py[num]
})
};
},
//触发全部开始选择
tStart: function () {
this.setData({
hidden: false
})
},
//触发结束选择
tEnd: function () {
this.setData({
hidden: true,
scrollTopId: this.data.showPy })
},当我们在索引那一栏上下滑动手指的同时，计算出当前手指可能触碰到的字母，并且当且仅当手指在元素范围内的时候触发。
可能你觉这些代码有部分冗余，是否可以将tStart与tEnd舍去？答案是可以的，功能不受影响，但是当你在上下滑动的过程中，可以明显感到中间索引的提示有明显的卡顿，这不是我们想要的。
代码写到这里，基本上已经差不多了。
