wx_selectArea

地址联动选择器采用微信小程序的 picker-view 组件

模板引入

提供 template 模板引入

1. 引入wxml及wxss

// example.wxml
<import src="../../template/index.wxml"/>
<template is="areaPicker" data="{{...areaPicker}}" />

// example.wxss
@import '../../template/index.wxss';

2. 组件初始化

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

const conf = {
	onShow: () => {
    initAreaPicker();
  },
};

Page(conf);

2.1 自定义配置

目前仅支持是否隐藏第三极选择栏，默认显示

import initAreaPicker from '../../template/index';

const conf = {
	onShow: () => {
    initAreaPicker({
      hideDistrict: true,
    });
  },
};

Page(conf);

2.2 获取当前选择的省市区信息

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

const conf = {
	btnClick() {
		console.table(getSelectedAreaData()); 
	},
};

Page(conf);

截图

旧版

小程序前期不支持 picker-view 组件时，用 scroll-view 模拟的联动选择器

欢迎反馈...