碼云：https://gitee.com/bestjarvan/public.git

2018年11月6日更新

新版效果

修改：

1. 新增半透明mask背景
2. 城市數(shù)據(jù)存放本地 大小400kb+有需要可以放自己服務(wù)器或者請求高德地圖api
3. 修改樣式
4. 修改整體字體大小

2018年3月24日
進(jìn)一步封裝picker-view 使用高德地圖城市數(shù)據(jù) 需要聯(lián)網(wǎng)或者自行下載到本地

先看效果：

2.gif

用法：

1、把組件放到小程序的根目錄下
2、在app.js 中 請求高德地圖城市數(shù)據(jù)

2018年11月6日更新 可根據(jù)情況添加或者不添加城市數(shù)據(jù)請求、 默認(rèn)不添加 城市數(shù)據(jù)已放在本地

//判斷本地是否有數(shù)據(jù) 沒有 就請求
onLaunch:() => {
  if (!wx.getStorageSync('citys')) {
      wx.request({
        url: "http://restapi.amap.com/v3/config/district?&subdistrict=3&key=你的高德key",
        method: "GET",
        success: function (res) {
          console.log(res['data']['districts'][0]['districts']);
          //  請求到數(shù)據(jù) 存在本地
          wx.setStorageSync('citys', res['data']['districts'][0]['districts']);
        }
      })
    }
}

3、在需要用的頁面json中寫下下列代碼，路徑根據(jù)自己的真實(shí)路徑修改

{
  "usingComponents":{
    "city-picker": "../../../components/city-picker/city-picker"
  }
}

4、在頁面中引用組件

//wxml
//綁定選中事件
<city-picker bind:selected="selectCity"></city-picker>

//js
selectCity: function(e){
  console.log(e.detail);
  //打印出來效果{province: "廣西壯族自治區(qū)", city: "北海市", county: "合浦縣"}
}