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>