微信小程序自定義組件：省市區聯動選擇器

region-picker

項目地址： github.com/lizus/regio…

說明

在微信小程序中使用的省市區聯動選擇器。微信小程序中內置有省市區聯動選擇器，但由於官方始終未公開具體的省市區數據，在實際項目中沒法生成相應的列表使用。使得這一功能並不完善。

本插件使用螞蟻金服的開放平臺中公佈的小程序服務區域文檔：docs.alipay.com/isv/10327 從新制做了省市區聯動選擇器。有須要的用戶能夠根據文檔，或area.js中提供的數據生成本身須要的區域列表。

佈署

將region-picker文件夾總體放入小程序源碼的components文件夾中，而後在須要使用的具體頁面json文件中的usingComponents中引入便可。示例：

"usingComponents": {
     "region-picker": "../../components/region-picker/region-picker"
 }
複製代碼

在頁面的wxml文件中使用以下代碼引入：

<region-picker bind:change="regionChange" province="{{province}}" city="{{city}}" county="{{county}}"></region-picker>
複製代碼

在頁面的js文件中使用相似以下代碼處理區域選擇事件：

page.regionChange=function (e) {
  that.setData({
    province:e.detail.province,
    city:e.detail.city,
    county:e.detail.county,
  });
};
複製代碼

屬性

province 設置選擇器默認的省名稱

city 設置選擇器默認的市名稱

county 設置選擇器默認的區縣名稱

以上全部數據見area.js

方法

bind:change 中聲明區域選擇肯定後的事件。調用後返回的e.detail中有三個數據：province,city,county分別對應省市區的名稱