uni-app 本地省市区三级联动

最新推荐文章于 2026-04-30 10:02:08 发布

原创

最新推荐文章于 2026-04-30 10:02:08 发布 · 862 阅读

标签

#前端 #uni-app

这篇博客展示了如何在uni-app中实现本地省市区三级联动。通过使用`<picker>`组件，结合自定义的数据结构，实现了不同层级的区域选择，并在选择时动态更新下级选项。在`onLoad`中初始化数据，`pickerChange`和`pickerColumnchange`事件处理滑动选择和列变化。此外，还包含了样式和数据结构的详细说明。

效果图：

1.vue主要代码

template：

<template>
   <view class="content">
       
       <view class="item-address">
           <view class="addressCot">
               <view class="addressEdit">
                   <view class="texttitle">选择地区：</view>
                   <view class="input" type="text" placeholder="请选择地区">
                       <picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
                           @change="pickerChange" @columnchange="pickerColumnchange">
                           <view class="">{ {select}}</view>
                       </picker>
                   </view>
               </view>
               <view class="addressEdit">
                   <view class="texttitle">居住村(小区) ：</view>
                   <input class="inputcontent" v-model="xiaoqu" placeholder="请填写居住村(小区) 名称" />
               </view>
               <view class="addressEdit2">
                   <view class="texttitle">详细地址：</view>
                   <input class="inputcontent" v-model="details" placeholder="请填写详细地址(门牌号)" />
               </view>
           </view>
       </view>
       
       <button class="changeaddress" @click="btnChangeAddress">修改</button>
   </view>
</template>