uniapp 省市区联动使用三个接口进行地址的三联

呔~泼猴

已于 2022-05-06 14:56:17 修改

阅读量698

点赞数

分类专栏： uniapp 文章标签：小程序

于 2022-05-06 14:44:56 首次发布

本文链接：https://blog.csdn.net/m0_64622807/article/details/124609214

版权

本文介绍如何在uniapp中使用三个接口实现省市区的三级联动效果，主要涉及liudx-pickerAddress组件的修改和回显功能，基于DCloud插件市场的三级联动地址插件。

摘要由CSDN通过智能技术生成

liudx-pickerAddress/index.vue 改为这个

<template>
	<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
	 :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" z-index="999">
	 <view class="u-picker-header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
	 	<view class="u-btn-picker u-btn-picker--tips" hover-class="u-opacity"
	 	 :hover-stay-time="150" @tap="getResult('cancel')">取消</view>
	 	<view class="u-btn-picker u-btn-picker--primary" hover-class="u-opacity"
	 	 :hover-stay-time="150" @touchmove.stop="" @tap.stop="getResult('confirm')">确定</view>
	 </view>
	 <view class="u-picker-body">
		<picker-view :value="pickVal" @change="bindChange" class="u-picker-view">
			<picker-view-column>
				<view class="u-column-item" v-for="(item,index) in districtsObj.provinces" :key="index">
					<view class="u-line-1">
						{
  {item.name}}
					</view>
				</view>
			</picker-view-column>
			<picker-view-column>
				<view class="u-column-item" v-for="(item,index) in districtsObj.cities" :key="index">
					<view class="u-line-1">
						{
  {item.name}}
					</view>
				</view>
			</picker-view-column>
			<picker-view-column>
				<view class="u-column-item" v-for="(item,index) in districtsObj.areas" :key="index">
					<view class="u-line-1">
						{
  {item.name}}
					</view>
				</view>
			</picker-view-column>
		</picker-view>
		</view>
	</u-popup>
</template>

<script>
	import uPopup from './u-popup'
	export default {
		props: {
			safeAreaInsetBottom: {
				type: Boolean,
				default: false
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {