微信开发 使用picker封装省市区三级联动模板

第一部分：整体思路

在微信小程序中使用picker封装省市区三级联动模板的主要思路如下：

1. 引入三个js文件或使用小程序提供的city-data数据源；
2. 定义三个picker组件；
3. 定义三个数据变量，分别存储省、市、区的信息；
4. 根据已选择的省市区信息，筛选对应的城市和地区信息；
5. 监听picker变化事件，更新已选中的省市区信息。

第二部分：具体步骤

1. 引入city.js、province.js和district.js文件或通过小程序自带的city-data数据源。在app.js文件中添加以下代码：

var city = require('/utils/city.js');
var province = require('/utils/province.js');
var district = require('/utils/district.js');

1. 在wxml文件中定义三个picker组件，并绑定change事件：

<view class="picker-wrap">
  <picker mode="selector" range="{{province}}" bindchange="bindProvinceChange">
    <view class="picker-text">{{province[indexProvince]}}</view>
  </picker>
  <picker mode="selector" range="{{city}}" bindchange="bindCityChange">
    <view class="picker-text">{{city[indexCity]}}</view>
  </picker>
  <picker mode="selector" range="{{district}}" bindchange="bindDistrictChange">
    <view class="picker-text">{{district[indexDistrict]}}</view>
  </picker>
</view>

1. 定义三个数据变量，并在onLoad函数中初始化省份列表：

data: {
  province: [],
  indexProvince: 0,
  city: [],
  indexCity: 0,
  district: [],
  indexDistrict: 0,
},
onLoad: function () {
  var arrayProvince = province.provinceArray();
  this.setData({
    province: arrayProvince
  });
},

1. 定义三个change事件处理函数，根据所选省市区信息筛选对应的城市和地区信息：

bindProvinceChange: function (e) {
  var index = e.detail.value;
  var arrayCity = city.cityArray(index);
  var arrayDistrict = district.districtArray(index, 0);
  this.setData({
    indexProvince: index,
    city: arrayCity,
    indexCity: 0,
    district: arrayDistrict,
    indexDistrict: 0
  });
},
bindCityChange: function (e) {
  var index = e.detail.value;
  var indexProvince = this.data.indexProvince;
  var arrayDistrict = district.districtArray(indexProvince, index);
  this.setData({
    indexCity: index,
    district: arrayDistrict,
    indexDistrict: 0
  });
},
bindDistrictChange: function (e) {
  var index = e.detail.value;
  this.setData({
    indexDistrict: index
  });
},

1. 在wxml文件中显示已选中的省市区信息：

<text class="address">
  已选择：{{province[indexProvince]}} {{city[indexCity]}} {{district[indexDistrict]}}
</text>

第三部分：示例演示

以下是两个picker封装省市区三级联动模板的示例演示。

示例一：基础版

基础版代码实现了三个picker的显示以及已选中的省市区信息的显示，但并未实现输入框关联数据变化的需求。

完整示例代码传送门

示例二：进阶版

进阶版在基础版的基础上，实现了输入框与picker的数据联动和选择框的动态显示的功能。实现方式是通过在change事件处理函数中调用setData函数，将所选的省市区信息与输入框中的内容进行绑定实现。

完整示例代码传送门