uni-app省市 区镇四级联动

在处理uni-app中的省市区镇四级联动时，可以通过picker组件来实现。以下是一个简单的代码示例，展示了如何实现四级联动选择。

首先，你需要有一个包含省市区镇数据的JSON文件，例如areas.json：

[
    {
        "name": "省1",
        "cities": [
            {
                "name": "市1-1",
                "districts": [
                    {
                        "name": "区1-1-1",
                        "towns": [
                            { "name": "镇1-1-1-1" },
                            { "name": "镇1-1-1-2" }
                        ]
                    },
                    {
                        "name": "区1-1-2",
                        "towns": [
                            { "name": "镇1-1-2-1" }
                        ]
                    }
                ]
            }
        ]
    },
    // 更多省份数据...
]

接下来，在你的uni-app页面的<template>部分，添加一个picker组件：

<template>
    <view>
        <picker mode="multiSelector" :range="multiArray" @change="bindMultiPickerChange">
            <view class="picker">
                {{multiIndex.map(index => multiArray[index].map(item => item.name).join('-')).join('、')}}
            </view>
        </picker>
    </view>
</template>

在<script>部分，你需要加载数据并处理联动逻辑：

<script>
export default {
    data() {
        return {
            areas: [], // 存储省市区镇数据
            multiArray: [], // 存储picker的range数据
            multiIndex: [0, 0, 0, 0] // 存储picker的当前选中项索引
        };
    },
    onLoad() {
        this.getAreaData();
    },
    methods: {
        getAreaData() {
            // 假设areas.json和你的页面在同一目录下
            uni.request({
                url: '/static/areas.json',
                success: (res) => {
                    this.areas = res.data;
                    this.initPicker();
                }
            });
        },
        initPicker() {
            this.multiArray = [this.areas, [], [], []];
            this.updatePickerRange(0);
        },
        updatePickerRange(index) {
            // 根据当前选中的上一级数据，更新下一级picker的range
            // 省略具体实现，逻辑是根据当前multiIndex[index]获取对应的子级数据
        },
        bindMultiPickerChange(e) {
            // 处理picker选择变化时的逻辑
            this.multiIndex = e.detail.value;
            if (e.detail.value.length < this.multiArray.length) {
                this.updatePickerRange(e.detail.value.length);
            }
        }
    }
};
</script>

在上面的代码中，getAreaData方法用于加载省市区镇数据，initPicker方法用于初始化picker组件的range数据，updatePickerRange方法用于根据当前选中的上一级数据动态更新下一级picker的range（这里省略了具体实现，需要你自己根据数据结构来实现）。bindMultiPickerChange方法用于处理picker选择变化时的逻辑。

注意，这个示例只是一个基础框架，你需要根据实际的业务逻辑和数据结构进行完善和调整。