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

在一些需求中，我们需要有一个全国城市的列表供我们选择，并且可以获得对应的经纬度坐标。
今天，我们就一起来实现这个需求。
好，我们先看一下我们期望的最终效果，如下图：

我们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。
关于搜索的需求可以看这个教程使用高德地图微信小程序SDK开发案例-输入提示（附源码）
我们今天主要实现如下需求：
1.页面布局。
2.进入页面自动定位当前所在的城市。
3.获取全国城市列表，并且按照拼音的首字母排序。
4.点击后获取对应的经纬度。
5.点击字母跳转到同一类拼音首字母开始的列表。
知道的要做的事情，咱们就开始撸代码～

<view class='list-city'>
    <scroll-view scroll-y="true" style="height:100%;"  scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">
      <view class='item'>
        <view class='fullname'>当前定位城市：{{citySelected}}</view>
      </view>
      <!-- 热门城市 -->
      <view class='item'>
        <view class='py' id="hot">热门城市</view>
        <view class="fullname hot-city" wx:for="{{hotCityData}}" wx:key="key" data-fullname="{{item.fullname}}" data-lat="{{item.location.lat}}" data-lng="{{item.location.lng}}" bindtap='selectCity'>{{item.fullname}}
        </view>
      </view>

      <!-- 全部 -->
      <view class='item' wx:for="{{cityData}}" wx:for-index="idx" wx:for-item="group" wx:key="key">
        <view class='py' id="{{idx}}">{{idx}}</view>
        <view class="fullname" wx:for="{{group}}" wx:key="key" data-fullname="{{item.fullname}}" data-lat="{{item.location.lat}}" data-lng="{{item.location.lng}}" bindtap='selectCity'>{{item.fullname}}
        </view>
      </view>

    </scroll-view>

    <!-- 首字母 -->
    <view class='city-py' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
      <view wx:for="{{_py}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{{item}}">{{item == 'hot' ? "★" : item}}
      </view>
    </view>
  </view>

这是页面的主要结构，我们分为三大块，热门城市，全部城市，还是有首字母。
我们使用循环来展示城市名称，并且使用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 scroll-y="true" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">

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

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

<view class='py' id="{{idx}}">{{idx}}</view>

我们为列表中的索引添加了属性id。
第二个问题，为什么绑定2个事件，而不是一个点击事件bindtap
这里关系到我们下一个需求，就是我们手指点击索引那一栏之后，不离开，通过上下滑动，可以快速预览城市列表，当手指离开之后，列表滚动到手指最后停留的那个字母位置。
而且，我们必须将滑动的交互事件绑定到字母索引的外层，就像我们看到的这样：

<view class='city-py' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
      <view wx:for="{{_py}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{{item}}">
        {{item == 'hot' ? "★" : item}}
      </view>
</view>

当我们将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舍去？答案是可以的，功能不受影响，但是当你在上下滑动的过程中，可以明显感到中间索引的提示有明显的卡顿，这不是我们想要的。
代码写到这里，基本上已经差不多了。
如有更好的实现方式希望在评论区能够分享。

详细案例请搜索微信小程序：52魔都
源码地址：https://github.com/749264345/...