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

最新推荐文章于 2024-04-17 10:17:19 发布

原创

最新推荐文章于 2024-04-17 10:17:19 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

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

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

使用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="(item,index) in areas"</