自定义(省市区)三级联动选择器

最新推荐文章于 2025-03-17 16:51:49 发布

兔斯基的猫

最新推荐文章于 2025-03-17 16:51:49 发布

阅读量1k

点赞数 1

分类专栏： uni-app 小程序文章标签：前端

本文链接：https://blog.youkuaiyun.com/zym526/article/details/107907410

版权

本文介绍如何创建一个不采用弹窗形式的三级联动选择器，而是直接显示在页面中，适合某些需要居中显示的需求。示例代码基于uniapp，通过picker-view和picker-view-column实现，并提供了在小程序中的应用示例和citys.js数据文件的下载链接。

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

平时使用的三级联动选择器组件，需要点击触发弹窗显示，确定或取消选择。但是有的需求需要位置居中并且直接显示而不是下弹窗。以下为自定义的一个三级联动选择器

使用picker-view和picker-view-column，如果想要实现弹窗和确定取消效果可以在外层自定义或使用组件展示。在小程序中自定义三级联动选择器基本上也是如此，代码遵循小程序的就可以了~

效果图：
在这里插入图片描述
uniapp中的使用例子：

页面

<template>
	<view class="find">
		<picker-view indicator-style="height:88rpx;" style="height:440rpx" :value="value" @change="bindChange" class="citybody">
		    <picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
		      <view v-for="(item,index) in provinces">{
  {item}}</view>
		    </picker-view-column>
		    <picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
		      <view v-for="(item,index) in citys">{
  {item}}</view>
		    </picker-view-column>
		    <picker-view-column style="line-height: 88rpx;font-size: 28rpx;text-align: center;">
		      <view v-for=

最低0.47元/天解锁文章