uniapp多级联动选择器,区域选择组件分享

news2024/11/25 20:51:47

uniapp官方的多级联动选择器效果怎么样就不多说了,一言难尽。。。。

然后我对比了多个组件库,发现了uview组件库,里面有个picker选择器还可以,这是链接

但是在使用过程中也发现了该组件的一些问题

1、操作栏只能显示在顶部,不支持底部显示。

        现实问题是很多场景操作栏显示在底部更好,或者产品就是要底部显示的。。。

2、只能传递一些很直观的数据,比如直接就是文字

        我们在实际开发中,很多时候数据库中保存的是id,这里不够灵活,适配性不高

3、数据源比较复杂时,比如是对象数据,我们还需要手动写初始化和查找逻辑,比较麻烦

本着想着懒的态度,我在uview的基础上做了进一步封装,优化,成果如下

        1、基于uview封装的级联选择器,内置的地区数据

        2、支持单列,多列,自动识别层级

        3、支持自动去除重复名称:北京市-北京市-东城区---->北京市东城区

        4、支持操作按钮显示在顶部,或者底部

        5、支持三种模式传递默认值,可任选其一,如下

​                 index:[0,0,7],

​                 defaultIds: [1, 110000, 110106],

​                 defaultNames: ['北京市', '北京市', '房山区']

 具体效果和代码,已放入插件市场,可以直接引入使用,传送门

下面是部分页面效果图展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/667871.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MAC搭建M1环境的stable-diffusion

MAC M1 搭建 stable-diffusion 环境 文章目录 MAC M1 搭建 stable-diffusion 环境环境准备1. 硬件环境2. 系统环境3. 基础软件环境 主要参考资料操作步骤1. 下载git2. 下载conda3. 创建python环境4. 下载仓库5. 安装依赖6. 转换模型7. 验证和测试8. 构造Web界面9. 测试WebUI10.…

2023软件测试面试热点问题,3天刷完你的软件测试就牛了~

与开发工程师相比,软件测试工程师前期可能不会太深,但涉及面还是很广的。 在一年左右的实习生或岗位的早期面试中,主要是问一些基本的问题。 涉及到的知识主要包括MySQL数据库的使用、Linux操作系统的使用、软件测试框架问题、测试环境搭建问…

2022电工杯数学建模B题解题思路(5G 网络环境下应急物资配送问题)

一、前言 本文是对2022年第十四届 “电工杯” 高校数学建模挑战赛B题:5G 网络环境下应急物资配送问题的解题思路,希望能够对正在学习数学建模或者研究该类问题的读者提供帮助。作者在当届的比赛中,获得了本科组三等奖的成绩&#xff…

【新星计划·2023】Linux是什么?它与Windows有什么区别?

作者:Insist-- 个人主页:insist--个人主页 作者会持续更新网络知识和python基础知识,期待你的关注 目录 一、Linux是什么? 二、Linux的应用领域 1、服务器领域 2、嵌入式领域 3、虚拟化 三、Linux的未来 1、云计算 2、大数…

Nmap中NSE数据文件分析

Nmap中NSE数据文件分析 1.Nmap中数据文件所在的位置2.暴力穷举时所使用的用户名和密码列表数据文件3.Web应用审计数据文件http-fingerprints.luahttp-sql-errors.lsthttp-web-files-extensions.lsthttp-devframework-fingerprints.luahttp-folders.txtvhosts-default.lstwp-plu…

S32K146入门 遇到 DefaultISR

S32K146入门 遇到 DefaultISR 1、芯片型号没有选对,pin管脚匹配不对 比如我使用的是S32K146HFMLQ,100pin,就要选择对应的型号 2、时钟配置不对 开发板是外部晶振8M,类型要选对。 我选择外部时钟给信号,导致一直出…

Linux使用NDK编译libtiff库并移植到Android平台

1.系统要求: ubuntu 20.04 LTS桌面版本 2.下载libtiff源码: 打开libtiff官方网站 ,打开libtiff源码仓库 http://www.simplesystems.org/libtiff/ 复制下载仓库地址: 克隆源码到本址: git clone --recursive https://gitlab.com/libtiff/libtiff.git 进入源码目录 3.安装…

软件测试需不需要懂代码?

无论是刚入测试行业的萌新,还是已经在测试行业闯荡了两三年的小司机们,都会琢磨一个问题:如果要持续发展下去,我要不要懂代码? 在软件测试初级阶段,不需要编程能力。但是任何一个职业,都会追求…

leetcode90. 子集 II(java)

子集II leetcode90. 子集 II题目描述解题思路代码演示 回溯算法专题 leetcode90. 子集 II 来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/subsets-ii 题目描述 给你一个整数数组 nums ,其中可能包含重复元素…

00后确实卷,公司新来的卷王,我们这帮老油条还真干不过.....

都说00后躺平了,但是有一说一,该卷的还是卷。 这不,前段时间我们公司来了个00后,工作都没两年,跳槽到我们公司起薪18K,都快接近我了。后来才知道人家是个卷王,从早干到晚就差搬张床到工位睡觉了…

Java集合Map接口的实现类(HashMap、LinkedHashMap等面试题)的结构

HashMap /** 一、Map的实现类的结构:* |----Map:双列数据,存储key-value对的数据 ---类似于高中的函数:y f(x)* |----HashMap:作为Map的主要实现类;线程不安全的,效率高;存储null的key和value|…

AIGC之文本内容生成概述(上)

由于本文内容稍微长了一点点,所以分成了上下两篇文章来介绍,本文是上篇,下篇将会在后续发布。关于自然语言的生成方面,这一块的内容太多了,本文也只是穿针引线,帮大家理清学习路线而已,更多的内…

关于ROS/ROS2 bag包的名称修改问题

1 问题的提出 在ROS/ROS2中,ROS 的 bag包的名称通常会包含录制的具体时间:YYYY-MM-DD-小时-分钟-秒钟,但是这样可读性不强,而且过一段时间,就不知道这个包是关于什么内容的了。如果需要修改bag包的名称,该…

从0开始,手写MySQL事务

说在前面:从0开始,手写MySQL的学习价值 尼恩曾经指导过的一个7年经验小伙,凭借精通Mysql, 搞定月薪40K。 从0开始,手写一个MySQL的学习价值在于: 可以深入地理解MySQL的内部机制和原理,Mysql可谓是面试的…

渲染机制不仅在Android系设计到,Flutter中也有设计

前言 本文将介绍 Android 的渲染机制。主要是带着大家了解 Android 是如何绘制并显示一帧图像的,同时会涉及 Skia底层渲染的使用,以及关联到flutter的UI体系设计,感兴趣的可以在阅读的同时使用 Skia自己搭建一套flutter UI体系 进行尝试。在…

# Linux 学习记录37(C高级篇)

Linux 学习记录37(C高级篇) 本文目录 Linux 学习记录37(C高级篇)一、常见的shell解析器二、变量1. shell脚本外部传参2. 输入输出(1. 输出(2. 输入 3. 命令置换符4. shell中的数组 三、shell中的算数运算1. (())运算2. $[ ]运算3. let运算4. expr指令(1.数据运算(3. 字符运算 四…

Flink 学习一 Flink 简介

Flink 学习一 https://flink.apache.org/ 1.快速认识Flink 1.1 离线批计算与实时流式计算 批计算:有界流 流式计算:无界流 批计算:针对有界流,在计算结果前可以看到整个数据集;流计算:针对无界流&…

Nacos的安装和部署

接下来的时间,我会将Nacos的安装部署,以及在微服务中将其作为配置中心,注册中心,以及它的高级应用会一一为大家分享,今天为大家分享的是Nacos的安装和部署,以windows为例。 1. 下载安装包 官网下载地址&a…

LaTeX在双栏文章里面放单栏或双栏图片【有图有代码】

LaTeX在双栏文章里面放单栏或双栏图片【有图有代码】 双栏文章双栏文章放单栏图片双栏文章放单栏图片 双栏文章 在需要双栏的地方加入\begin{multicols}{2}…\end{multicols} 一般我们可能会希望摘要部分是单栏的。 其余部分设置为双栏,如下: \begin{m…

wxPython 矩形选择框 测试

如下图&#xff0c;这种矩形选择框在图形软件里是必备操作&#xff0c;用python怎么实现&#xff1f;我用wxpython 做了一个例子。 代码如下&#xff1a; #!/usr/bin/env python # -*- coding: utf-8 -*-# Project: test # File : SelectRectang.py # Author : Long.Xu <…