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

在一些需求中，咱们须要有一个全国城市的列表供咱们选择，而且能够得到对应的经纬度坐标。
今天，咱们就一块儿来实现这个需求。
好，咱们先看一下咱们指望的最终效果，以下图：

咱们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。
关于搜索的需求能够看这个教程使用高德地图微信小程序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/...