（转）个微信小程序的省市区选择器

思维导图

主要代码

组件 region-picker.js

/* region-picker.wxml */
class="free-dialog {{dialog ? 'free-dialog--show' : ''}}">
    class="free-dialog__mask" bindtap="emitHideRegion">>
    class="free-dialog__container">
        class="free-dialog__container__header">
            >选择所在地区>
            src="自行替换36rpx*36rpx的x图标"
                class="close"
                bindtap="emitHideRegion">
            >
        >
        class="free-dialog__container__content">
            class="free-content {{isIphoneX ? 'ipx' : ''}}">
                class="free-content__tabs">
                    class="free-content__tabs__tab {{region.select === index ? 'select' : ''}}"
                        wx:for="{{region.tabs}}"
                        wx:key="{{index}}"
                        wx:if="{{index <= region.select}}"
                        data-level="{{index}}"
                        bindtap="changeRegionLevel">
                        {{item.name}}
                    >
                >
                scroll-y class="free-content__scroll">
                    class="free-content__scroll__item"
                        wx:for="{{area}}"
                        wx:key="id"
                        data-id="{{item.id}}"
                        data-name="{{item.name}}"
                        bindtap="bindRegionChange">
                        {{item.name}}
                    >
                >
            >
        >
    >
>

组件 region-picker.wxss

/* 页面的 WXML */
bindtap="chooseRegion">请选择>
>
    wx:if="{{regionValue[0].id}}">{{regionValue[0].name}}>
    wx:if="{{regionValue[1].id}}">{{regionValue[1].name}}>
    wx:if="{{regionValue[2].id}}">{{regionValue[2].name}}>
>
...
region-value="{{regionValue}}"
    show-region="{{showRegion}}"
    bind:myevent="emitHideRegion">
>

页面的 js

/* area.js */
module.exports = [{
    id: '...',
    name: '...',
    _child: [{
        id: '...',
        name: '...',
        _child: [{
            id: '...',
            name: '...'
        }, ...]
    }, ...]
}, ...]

有疑问戳微信小程序官方文档

链接：https://www.jianshu.com/p/58ebcbaf2906