uniapp中省市区三级联动选择

原创

已于 2023-07-13 13:59:24 修改 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2021-04-25 14:28:04 首次发布

本文介绍了在uni-app框架中如何实现省市区三级联动的选择功能。内容包括展示了一个实际的效果，并提供了相应的代码示例，适用于需要兼容多个平台的开发需求。

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

如果只要考虑微信小程序的话，直接用 mode = region 就行，要兼容其他端就要自己写了
在这里插入图片描述
先开下效果

代码如下

//html
<view @click="showpop>所在地址：{
  
  {citytext}}</view>
<view class="addressPopup-box">
	<uni-popup id="addressPopup" ref="addressPopup" :type="'bottom'" @change="change">
		<picker-view  :value="region" @change="bindChange" @pickstart="onPickstart" @pickend="onPickend">
			<picker-view-column class="picker-view2">
				<view class="f-center" v-for="(item,index) in citylist" :key="index">{
  
  {item.label}}
				</view>
			</picker-view-column>
			<picker-view-column v-if="citylist[region[0]]" class="picker-view2">
				<view class="f-center" v-for="(item,index) in citylist[region[0]].children" :key="index">