选择省市区

本文介绍了一个 iOS 平台上的地址选择器组件,支持不同层级的地址选择,包括省市区、省市或仅省份,并提供了按钮点击事件处理及回调方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//可以选择到省市区、省市、省

-(void)btnClick:(UIButton *)button{ __weak typeof(self) weakSelf = self; PlacePickMainController *vc = [[PlacePickMainController alloc] init]; if (button.tag == 0) { vc.pickType = PlacePickTypeToCounty;//选择省-市-区 }else if (button.tag == 1){ vc.pickType = PlacePickTypeToCity;//选择省-市 }else{ vc.pickType = PlacePickTypeToProvince;//选择省 } [weakSelf.navigationController pushViewController:vc animated:YES]; __weak PlacePickMainController *weakVC = vc; weakVC.FinishDoneBlock = ^(NSString *selectAllStr, NSString *provinceID, NSString *cityID, NSString *countryID, NSString *holeInfoStr) { NSLog(@"%@---%@---%@----%@",provinceID,cityID,countryID,holeInfoStr); [button setTitle:holeInfoStr forState:UIControlStateNormal]; }; }

 

DEMO地址  https://github.com/justqi/DQPlacePick

转载于:https://www.cnblogs.com/justqi/p/8989970.html

在 UniApp 中实现省市区选择页面,可以采用以下几种方式来满足不同场景下的需求,包括使用官方组件、第三方插件以及自定义组件。以下是详细的实现方案: ### 使用 `uni-data-picker` 官方组件 `uni-data-picker` 是 UniApp 提供的一个内置组件,支持省市区三级联动选择,并且可以绑定本地数据或远程数据源。通过 `v-slot` 插槽可以自定义显示选中的内容。 示例代码如下: ```html <uni-data-picker v-slot:default="{ data, error, options }" :localdata="localData" popup-title="请选择省市区" @change="onchange" @nodeclick="onnodeclick" > <view class="selectedAddress"> <view v-if="data.length == 0 && curLocation">{{ curLocation }}</view> <view v-if="data.length" class="selected"> <view v-for="(item, index) in data" :key="index" class="selected-item"> <text>{{ item.text }}</text> </view> </view> <view class="addrlocation"> <uni-icons type="location" color="#ec4149" size="24"></uni-icons> </view> </view> </uni-data-picker> ``` 在 `data()` 中定义数据源和当前位置信息: ```ts data() { return { localData: [], // 省市区地址数据 curLocation: uni.getStorageSync('location_address') } } ``` 该组件支持事件监听,如 `@change` 和 `@nodeclick`,可以用于处理用户的选择操作[^2]。 --- ### 使用第三方插件:Ba-DataPicker Ba-DataPicker 是一个功能丰富的省市区选择插件,支持多级联动、自定义数据源、弹窗显示等特性。它适用于需要更复杂交互的场景。 在 `script` 中调用插件的方法如下: ```ts export default { data() { return { msgList: [] } }, methods: { onShowDataPicker() { dataPicker.show({}, (res) => { this.showResult(JSON.stringify(res)) if (res.action) { if (res.action == "onChecked") { // 监听事件:点击选择 } else if (res.action == "onClickOk") { // 监听事件:点击确认 // res.checkeds 中是选中的数据 } else if (res.action == "onClickCancel") { // 监听事件:点击取消 } } }); }, showResult(msg) { console.log(msg) this.msgList.unshift(msg) uni.showToast({ title: msg, icon: "none", duration: 3000 }) } } } ``` 该插件允许通过参数配置弹窗行为,并通过回调函数获取用户的最终选择结果[^3]。 --- ### 自定义省市区选择器组件 如果现有组件或插件无法完全满足需求(例如需要特殊交互、数据绑定方式不同),可以基于 Vue 3 + TypeScript 实现一个自定义组件。这种方式可以灵活控制组件行为,例如: - 支持通过按钮或输入框触发弹窗 - 自定义数据绑定方式 - 返回最终选择结果或多级选择结果 以下是一个基础结构示例: ```ts <template> <view> <button @click="openPicker">打开选择器</button> <view v-if="selectedRegion"> {{ selectedRegion }} </view> </view> </template> <script setup lang="ts"> import { ref } from 'vue' const selectedRegion = ref<string>('') const openPicker = () => { // 模拟打开选择器并获取结果 selectedRegion.value = '广东省 深圳市 南山区' } </script> ``` 通过自定义逻辑,可以结合本地或远程数据源实现完整的省市区选择功能。 --- ### 总结 在 UniApp 中实现省市区选择页面,可以采用以下方式: - **官方组件**:`uni-data-picker` 适合快速集成,支持本地和远程数据源; - **第三方插件**:如 Ba-DataPicker,提供更丰富的功能和交互; - **自定义组件**:适用于需要高度定制的场景,结合 Vue 3 + TypeScript 实现。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值