微信小程序全國城市列表索引開發案例

在一些需求中，咱們須要有一個全國城市的列表供咱們選擇，而且能夠得到對應的經緯度座標。
今天，咱們就一塊兒來實現這個需求。
好，咱們先看一下咱們指望的最終效果，以下圖：

咱們看到左側有個下拉選項，右側是供搜索的輸入關鍵字用到的輸入框。
關於搜索的需求能夠看這個教程使用高德地圖微信小程序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/...