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

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

我们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。 关于搜索的需求可以看这个教程使用高德地图微信小程序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/guide/get-data/regeo提供的接口来直接获取详细地址信息。

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 lbs.qq.com/qqmap_wx_js… 提供的接口来获取。因为我们接下来就要使用腾讯地图微信小程序SDK。 第二步我们实现了，接下来获取全国城市列表。 是的，lbs.qq.com/qqmap_wx_js… raw.githubusercontent.com/749264345/w… 我们根据数据直接赋值到页面上的参数，结果很顺利。 很快，我们到了第四步，我们为列表的事件添加函数。

   //选择城市
   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魔都 源码地址：github.com/749264345/w…

转载于:https://juejin.im/post/5bf9403d6fb9a049d61d3297