uniapp picker实现底部弹窗（日期选择/时间选择/自定义数据）

uniapp picker实现底部弹窗（日期选择/时间选择/自定义数据）

需要实现的效果如下：

• 自定义数据

• 时间选择（注意：在不同平台有不同的ui表现！！）

所以根据手机的平台可能会呈现不同的效果：例如：
 

 

上代码

<template>
	<view style="margin-top: 500rpx;">
		<!-- 
			注意：要触发的元素需要放在picker里，否则不会触发picker
		 -->
		<!-- picker的属性
			:range       动态绑定数据    仅在mode为 selector 或 multiSelector 时，有效
			mode         picker的模式    可选模式：普通选择器，多列选择器，时间选择器，日期选        
                                         择器，省市区选择器，默认是普通选择器。
						 普通选择器(mode = selector)，多列选择器(mode = multiSelector)，// 
                         一般用于自定义数据
						 时间选择器(mode = time)，日期选择器(mode = date)，省市区选择器 
                         (mode = region) 
			@change      用来绑定用户点击确定后触发的方法
			@cancel      用来绑定用户取消后触发的方法
			更多属性或方法可观看官方文档：https://uniapp.dcloud.io/component/picker?id=picker
		-->
		<picker :range="customData" mode='selector' @change="customDataChange" @cancel="cancelSelect">
			<view>点我触发事件</view>
		</picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 自定义数据
				customData: ["已拒单","未处理"],
			}
		},
		methods: {
			// 点击完成按钮的时候触发，
			customDataChange(e) {
				//通过e.detail.value获取值，获取的是自定义数据的下标
				const val = e.detail.value
				console.log(val);
			},
			cancelSelect(e){
				console.log("您已取消选择");
			}
			
		}
	}
</script>

<style>
</style>