原生微信小程序自定义picker多列选择器:picker写法用法

前言:

 

        

        最近用原生微信小程序写法写医疗相关项目微信小程序,在编辑个人资料的时候,需要很多选择器,比如城市地区选择器,职业职称选择器,科室选择器,学校选择器,学历选择器,年份日期选择器........

 

        总之用到的地方比较多,而微信文档里面这类的又很少,有的还不适合项目。需要进行改造。于是乎,便有了这篇文章。

 这是PC的编辑用户信息的选择器,小程序要做一样功能的,且调用PC选择器里面的接口返回的数据。

 

 

 

                                                         (pc的一些选择器样式功能)

先看看微信自有的一些选择器 

微信自带选择器直通车======》》》》》》  picker

 

 像上面的一些职称,年份,是可以直接用自带的普通选择器去做

 wxml

<view class="tui-picker-content">
			<view class="tui-picker-name">补全信息</view>
			<picker bindchange="changeOption" mode="selector"  range-key="label" value="{{optionindex}}" range="{{mobileOptions}}" style="width: 76%;">
				:<text class="tui-picker-detail">{{mobileOptions[optionindex].label}}</text>
				<image src="/images/select_down.png" mode=""></image>
	</picker>
</view>

js 

//数据	
mobileOptions: [{
			roleid: 1,
			label: '执业医师'
		}, {
			roleid: 5,
			label: '医学生'
		}, {
			roleid: 0,
			label: '其他'
		}],



	// 选择补充信息
	changeOption(e) {
		console.log(e, 'eeeee',this.data.mobileOptions[e.detail.value].roleid)
		this.setData({
			roleid: this.data.mobileOptions[e.detail.value].roleid,
			optionindex: e.detail.value
		});
		//职业医师
		if (this.data.mobileOptions[e.detail.value].roleid == 1) {

		}
		//医学生
		if (this.data.mobileOptions[e.detail.value].roleid == 1) {

		}
		//其他
		if (this.data.mobileOptions[e.detail.value].roleid == 0) {

		}
	},

多级选择器 

 

<!--pages/picker/picker.wxml-->
<view>
	<view class="tui-picker-content">
			 <view class="tui-picker-name">科室</view>
			<picker mode="multiSelector" bindchange="bindMultiPickerChange_keshi" bindcolumnchange="bindMultiPickerColumnChange_keshi"
			      value="{{multiIndex}}" range="{{newArr}}">
			    <view class="picker">
					:<van-button type="primary" style="font-size:28rpx;">{{division?division:'请选择科室'}}</van-button>
			    </view>
				<image  bindchange="changeRegin" src="/images/select_down.png" mode="" ></image>
			</picker>
		</view>
</view>

数据格式 

 

 

// pages/picker/picker.js
import {
	config
} from '../../config.js'
Page({
	onShareAppMessage() {
		return {
			title: 'picker',
		}
	},
	/**
	 * 页面的初始数据
	 */
	data: {
	    //科室
		multiArray:[],
		multiIndex: [0, 0, 0],
		multiIds: [],
		newArr: [],
	},
	onShow: function() {
		console.log('onShow')


	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {

	},

	bindMultiPickerChange_keshi(e) {
		console.log(this.data.multiIds);
		let name = this.data.multiIds.map(i=>i.name).join('/')
		console.log(name,'科室name===')
		this.setData({
			division:name
		})
	},
	bindMultiPickerColumnChange_keshi(e) {
		let data = {
			newArr: this.data.newArr,
			multiIndex: this.data.multiIndex,
			multiIds: this.data.multiIds,
		};
		data.multiIndex[e.detail.column] = e.detail.value;

		let searchColumn = () => {
			let arr1 = [];
			let arr2 = [];
			this.data.multiArray.map((v, vk) => {
				if (data.multiIndex[0] === vk) {
					data.multiIds[0] = {
						...v,
					};
					v.children.map((c, ck) => {
						arr1.push(c.name);
						if (data.multiIndex[1] === ck) {
							data.multiIds[1] = {
								...c,
							};
							// c.children.map((t, vt) => {
							// 	arr2.push(t.name);
							// 	if (data.multiIndex[2] === vt) {
							// 		data.multiIds[2] = {
							// 			...t,
							// 		};
							// 	}
							// });
						}
					});
				}
			});
			data.newArr[1] = arr1;
			data.newArr[2] = arr2;
		};
		switch (e.detail.column) {
			case 0:
				// 每次切换还原初始值
				data.multiIndex[1] = 0;
				data.multiIndex[2] = 0;
				// 执行函数处理
				searchColumn();
				break;
			case 1:
				data.multiIndex[2] = 0;
				searchColumn();
				break;
		}
		this.setData(data);
	},




	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {

	}
})

尾部,看看成品

看完记得点个赞呗~~

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv5改进系列(21)——替换主干网络之RepViT(清华 ICCV 2023|最新开源移动端ViT)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制 YOLOv5改进系列(2

基于YOLOv8模型的五类动物目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的五类动物目标检测系统可用于日常生活中检测与定位动物目标&#xff08;狼、鹿、猪、兔和浣熊&#xff09;&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与…

如何区分闰年与平年

首先要明白 地球绕太阳运行周期为365天5小时48分46秒&#xff08;合365.24219天&#xff09;&#xff0c;即一回归年&#xff08;tropical year&#xff09;。公历的平年只有365日&#xff0c;比回归年短约0.2422 日&#xff0c;每四年累积约一天&#xff0c;把这一天加于2月末…

CentOS7源码安装MySQL详细教程

&#x1f60a; 作者&#xff1a; Eric &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_47316183?typeblog &#x1f389; 主题&#xff1a;CentOS7源码安装MySQL详细教程 ⏱️ 创作时间&#xff1a; 2023年08月014日 文章目录 1、安装的四种方式2、源码安装…

机器学习基础之《分类算法(3)—模型选择与调优》

作用是如何选择出最好的K值 一、什么是交叉验证&#xff08;cross validation&#xff09; 1、定义 交叉验证&#xff1a;将拿到的训练数据&#xff0c;分为训练和验证集。以下图为例&#xff1a;将数据分成5份&#xff0c;其中一份作为验证集。然后经过5次(组)的测试&#x…

nginx php-fpm安装配置

nginx php-fpm安装配置 nginx本身不能处理PHP&#xff0c;它只是个web服务器&#xff0c;当接收到请求后&#xff0c;如果是php请求&#xff0c;则发给php解释器处理&#xff0c;并把结果返回给客户端。 nginx一般是把请求发fastcgi管理进程处理&#xff0c;fascgi管理进程选…

musl libc ldso 动态加载研究笔记:02

前言 本篇继续研究 musl libc ldso 的动态加载过程中遇到的关键性的概念&#xff1a;到底要加载ELF 文件的哪些内容到 内存 当前如果遇到 ELF 动态加载&#xff0c;当前系统需要有【文件系统】&#xff0c;并且有较大的内存&#xff0c;因为 ELF 文件是无法直接运行的&#xf…

【解析postman工具的使用---基础篇】

postman前端请求详解 主界面1.常见类型的接口请求1.1 查询参数的接口请求1.1.1 什么是查询参数?1.1.2 postman如何请求 1.2 ❤表单类型的接口请求1.2.1 复习下http请求1.2.2❤ 什么是表单 1.3 上传文件的表单请求1.4❤ json类型的接口请求 2. 响应接口数据分析2.1 postman的响…

Qt应用开发(基础篇)——MDI窗口 QMdiArea QMdiSubWindow

一、前言 QMdiArea类继承于QAbstractScrollArea&#xff0c;QAbstractScrollArea继承于QFrame&#xff0c;是Qt用来显示MDI窗口的部件。 滚屏区域基类 QAbstractScrollAreahttps://blog.csdn.net/u014491932/article/details/132245486 框架类 QFramehttps://blog.csdn.net/u01…

【Alibaba中间件技术系列】「RocketMQ技术专题」让我们一起探索一下DefaultMQPushConsumer的实现原理及源码分析

RocketMQ开源是使用文件作为持久化工具&#xff0c;阿里内部未开源的性能会更高&#xff0c;使用oceanBase作为持久化工具。 在RocketMQ1.x和2.x使用zookeeper管理集群&#xff0c;3.x开始使用nameserver代替zk&#xff0c;更轻量级&#xff0c;此外RocketMQ的客户端拥有两种的…

公网远程连接Redis数据库「内网穿透」

文章目录 1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 保留一个固定tcp地址4.2 配置固定TCP地址4.3 使用固定的tcp地址连接 前言 洁洁的个人主页 我就问你有没有发挥&#xff0…

GuLi商城-前端基础Vue-生命周期和钩子函数

下图展示了实例的生命周期。你不需要立马弄明白所有的东西&#xff0c;不过随着你的不断学习和使用&#xff0c;它 的参考价值会越来越高。 VUE 的生命周期指的是组件在创建、运行和销毁过程中所经历的一系列事件&#xff0c;通过这些事件可以 让开发者在不同阶段进行相应的…

【C语言】指针的进阶

目录 一、字符指针 二、指针数组 三、数组指针 1.数组指针的定义 2.&数组名和数组名区别 3.数组指针的使用 四、数组参数与指针参数 1.一维数组传参 2.二维数组传参 3.一级指针传参 4.二级指针传参 五、函数指针 六、函数指针数组 七、指向函数指针数组的指针…

【使用教程】在Ubuntu下运行CANopen通信PMM伺服电机使用教程(NimServoSDK_V2.0.0)

本教程将指导您在Ubuntu操作系统下使用NimServoSDK_V2.0.0来运行CANopen通信的PMM系列一体化伺服电机。我们将介绍必要的步骤和命令&#xff0c;以确保您能够成功地配置和控制PMM系列一体化伺服电机。 NimServoSDK_V2.0.0是一款用于PMM一体化伺服电机的软件开发工具包。它提供了…

金融语言模型:FinGPT

项目简介 FinGPT是一个开源的金融语言模型&#xff08;LLMs&#xff09;&#xff0c;由FinNLP项目提供。这个项目让对金融领域的自然语言处理&#xff08;NLP&#xff09;感兴趣的人们有了一个可以自由尝试的平台&#xff0c;并提供了一个与专有模型相比更容易获取的金融数据。…

Git 设置代理

Git 传输分两种协议&#xff0c;SSH和 http(s)&#xff0c;设置代理也需要分两种。 http(s) 代理 Command Line 使用 命令行 模式&#xff0c;可以在Powershell中使用以下命令设置代理&#xff1a; $env:http_proxy"http://127.0.0.1:7890" $env:https_proxy&quo…

算法通关村第十关 | 归并排序

1. 归并排序原理 归并排序&#xff08;MERARE-SORT&#xff09;简单来说就是将大的序列先视为若干个比较小的数组&#xff0c;分成比较小的结构&#xff0c;然后是利用归并的思想实现的排序方法&#xff0c;该算法采用经典的分治策略&#xff08;分就是将问题分成一些小的问题分…

数学建模之“聚类分析”原理详解

一、聚类分析的概念 1、聚类分析&#xff08;又称群分析&#xff09;是研究样品&#xff08;或指标&#xff09;分类问题的一种多元统计法。 2、主要方法&#xff1a;系统聚类法、有序样品聚类法、动态聚类法、模糊聚类法、图论聚类法、聚类预报法等。这里主要介绍系统聚类法…

【uniapp】picker mode=“region“ 最简单的省市区 三级联动

省市区 picker template <picker mode"region" :value"date" class"u-w-440" change"bindTimeChange"><u--inputborder"bottom"class"u-fb u-f-s-28"placeholder"请选择省市区"type"te…

vue实例挂载过程

以下仅为个人见解。 1.大致流程&#xff1a; new Vue()时会调用initMixin(Vue)将_init挂载到vue原型上&#xff1b;在_init()中调用$mount()方法($mount()方法也是挂载到vue原型上的)编译template模版&#xff0c;并生成render()函数&#xff1b;挂载到vm上后&#xff0c;会…