微信小程序自带的省市区联动不能添加对应id,所以只能自己造一个轮子。首页感谢treadpit大佬。在这个的基础上做了一些简单的改动,把通过网络请求获取的信息,改成本地,速度上有很大的提升。

效果图

21312

使用

wxml

<view>
  <import src="../../template/index.wxml"/>
  <view bindtap='getSelecedData'>
    <template is="areaPicker" data="{{...areaPicker}}" />
  </view>
</view>

js

import initAreaPicker, { getSelectedAreaData } from '../../template/index';

Page({
  data: {
    areaPicker: {
      show: true, // 控制是否显示    
    }
  },
  onShow: () => {
    initAreaPicker({
      // hideDistrict: true, // 是否隐藏区县选择栏,默认显示
    });
  },
  getSelecedData() {
    console.log(getSelectedAreaData()); // 获取当前选中的省市区
  },
});

下载地址

Fork me on GitHub