html手机城市索引列表,微信小程序全国城市列表索引开发案例

在一些需求中，我们需要有一个全国城市的列表供我们选择，并且可以获得对应的经纬度坐标。

今天，我们就一起来实现这个需求。

好，我们先看一下我们期望的最终效果，如下图：

我们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。

关于搜索的需求可以看这个教程使用高德地图微信小程序SDK开发案例-输入提示(附源码)

我们今天主要实现如下需求：

1.页面布局。

2.进入页面自动定位当前所在的城市。

3.获取全国城市列表，并且按照拼音的首字母排序。

4.点击后获取对应的经纬度。

5.点击字母跳转到同一类拼音首字母开始的列表。

知道的要做的事情，咱们就开始撸代码～

当前定位城市：{{citySelected}}

热门城市

{{item.fullname}}

{{idx}}

{{item.fullname}}

{{item == 'hot' ? "★" : item}}

这是页面的主要结构，我们分为三大块，热门城市，全部城市，还是有首字母。

我们使用循环来展示城市名称，并且使用data-fullname="{{item.fullname}}" data-lat="{{item.location.lat}}" data-lng="{{item.location.lng}}" bindtap='selectCity'来记录对应城市的经纬度，同时绑定了点击事件来获取经纬度和城市名称。

至于页面右侧字母索引绑定的事件比较复杂，我们到后面详细来讲。

页面的骨架有了，接着可以写几行css来美化下页面。然后我们正式进入主要阶段。

我们通过高德地图微信小程序SDKhttps://lbs.amap.com/api/wx/g...。

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)

}

})

},

或者我们也可以使用腾讯地图微信小程序SDK https://lbs.qq.com/qqmap_wx_j... 提供的接口来获取。因为我们接下来就要使用腾讯地图微信小程序SDK。

第二步我们实现了，接下来获取全国城市列表。

是的，https://lbs.qq.com/qqmap_wx_j...，在页面上我们很快发现了这个接口，我们直接调用。然而我直接将数据保存到了js文件。

https://raw.githubusercontent...

我们根据数据直接赋值到页面上的参数，结果很顺利。

很快，我们到了第四步，我们为列表的事件添加函数。

//选择城市

selectCity: function (e) {

var dataset = e.currentTarget.dataset;

this.setData({

citySelected: dataset.fullname,

location: {

latitude: dataset.lat,

longitude: dataset.lng

}

});

}

我们获取到刚才我们设置的三个属性，并且保存他们，以备后续使用。

是的，很简单，我们现在差后一步。当我们点击C的时候，页面滚动到重庆市，点击W的时候页面滚动到武清区。。。。以此类推。

于是我们字母索引添加2个事件，bindtouchstart="getPy" bindtouchend="setPy"。

//获取点击的字母，在页面放大上展示

getPy: function (e) {

this.setData({

hidden: false,

showPy: e.target.id,

})

},

//将设置到字母，赋值到scrollTopId

setPy: function (e) {

this.setData({

hidden: true,

scrollTopId: this.data.showPy

})

},

不急，我们慢慢来，这里有几个问题。

1.赋值到scrollTopId是为什么？

我们看到我们使用了小程序的scroll-view组件，我们将scrollTopId这个值赋值给了scroll-into-view属性，scroll-with-animation="true" 并且滚动时有滑动效果。

这个类似于网页中的锚点，给scroll-into-view赋一个值X以后，页面将滚动到子元素设置属性id='x'的地方。所以我们看到：

{{idx}}

我们为列表中的索引添加了属性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舍去？答案是可以的，功能不受影响，但是当你在上下滑动的过程中，可以明显感到中间索引的提示有明显的卡顿，这不是我们想要的。

代码写到这里，基本上已经差不多了。

如有更好的实现方式希望在评论区能够分享。