uni-app中使用微信小程序picker组件案例

* picker选择器（ 从底部弹起的滚动选择器）

微信官网：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

uni-app 官网：https://uniapp.dcloud.io/component/picker?id=picker

案例代码：

     <template>
	<view style="height: 500px;width: 100%;" class="vertical">
		<view style="width: 100%;">
			<view class="horizontal" style="margin: 26px 0;font-size: 18px;;">证件预填登录</view>
			<view class="outside-style">
				<view v-bind:class="[isExhibition?'parent-view-style2':'parent-view-style']">
					<view class="text-style">姓名</view>
					<input class="input-style" v-model="inputValue_Name" @focus="onFocus()" @blur="onBlur()" placeholder="请填写姓名" />
					<view v-if="isShow" @click="clearInput()" class="include-image-style">
						<image src="/static/icon_16.png" class="img-style"></image>
					</view>
				</view>
			</view>
			<view class="outside-style">
				<view class="parent-view-style">
					<view style="width:108px;padding-bottom:7px;">证件类型</view>
					<picker @change="onChooseType" :range="pull_Down_Array">
						<view class="pull-down-parent">
							<input class="input-style" style="margin-left: 38px;" v-model="inputValue_PapersType" disabled="disabled"
							 placeholder="请选择证件类型" />
							<view class="include-image-style">
								<image src="/static/icon_31.png" class="img-style"></image>
							</view>
						</view>
					</picker>
				</view>
			</view>
			<view class="outside-style">
				<view :class="[isExhibition2?'parent-view-style2':'parent-view-style']">
					<view class="text-style">证件号</view>
					<input class="input-style" v-model="inputValue_IDNumber" id="inputId" @focus="onFocus2()" @blur="onBlur2()"
					 placeholder="请填写证件号" type="number" maxlength="18" />
					<view v-if="isShow2" @click="clearInput2()" class="include-image-style">
						<image src="/static/icon_16.png" class="img-style"></image>
					</view>
				</view>
			</view>
			<view class="horizontal" style="margin-top: 16px;">
				<view @click="jumpPage()" style="width: 106px;height: 38px;color: #FFFFFF;;background-color: rgb(22,155,213);text-align: center;line-height: 38px;border-radius: 4px;;">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vue from '../../App.vue'
	export default {

		data() {
			return {
				//
				isExhibition: false, //控制view的border-bottom的样式切换
				isExhibition2: false, //控制view的border-bottom的样式切换
				//下拉框所需 证件类型
				pull_Down_Array: ['--请选择证件--', '第一代居民身份证', '第二代居民身份证', '临时身份证', '中国护照', '户口簿', '村民委员会证明', '学生证', '军官证',
					'离休干部荣誉证', '军官退休证', '文职干部退休证', '军事学员证', '武警证', '士兵证', '香港通行证', '澳门通行证', '台湾通行证或有效旅行证件', '外国人永久居留证', '边民出入境通行证',
					'外国护照', '港澳居民居住证', '台湾居民居住证', '其他'
				],
				papersTypeIndex: 0,
				inputValue_Name: '', //姓名
				inputValue_PapersType: '', //证件类型
				inputValue_IDNumber: '', //卡号
				isShow: false, //控制清除按钮
				isShow2: false, //
			}
		},
		methods: {
			onFocus(e) {
				console.log("焦点事件触发...");
				this.isExhibition = true;
			},
			onBlur() {
				console.log("失去焦点事件...");
				this.isExhibition = false;
			},
			onFocus2(e) {
				console.log("焦点事件触发...");
				this.isExhibition2 = true;
			},
			onBlur2() {
				console.log("失去焦点事件...");
				this.isExhibition2 = false;
			},

			//清空文本框
			clearInput() {
				this.inputValue_Name = '';
				// this.isShow = false;
			},
			//清空文本框
			clearInput2(e) {
				this.inputValue_IDNumber = '';
			},
			//下拉框所需方法
			onChooseType(e) {
				this.papersTypeIndex = e.target.value;
				this.inputValue_PapersType = this.pull_Down_Array[this.papersTypeIndex]
				console.log(this.inputValue_PapersType, "选择的...")
			},

			jumpPage() {
				//跳转之前，将信息保存到全局变量 globalDate
				vue.globalData.user_Name = this.inputValue_Name;
				vue.globalData.user_PapersType = this.inputValue_PapersType;
				vue.globalData.user_IDNumber = this.inputValue_IDNumber;
				console.log("zhi:", vue.globalData.user_Name)
				if (this.inputValue_IDNumber) {
					wx.showToast({
						icon: 'loading',
						title: '请稍后，正在跳转...',
						duration: 2000,
						success: function() {
							wx.navigateTo({
								url: './shopping-car'
							})
						}
					})
				} else {
					wx.showToast({
						icon: '',
						title: '请先完整信息...',
						duration: 3000,
					})
				}
			},
		},
		watch: {
			inputValue_Name: function(value) {
				if (value) {
					this.isShow = true;
				} else {
					this.isShow = false;
				}
			},
			inputValue_IDNumber: function(value) {
				if (value) {
					this.isShow2 = true;
				} else {
					this.isShow2 = false;
				}
			},
		}
	}
</script>

<style>
	.outside-style {
		display: flex;
		justify-content: center;
		margin-bottom: 6px;
	}

	.input-style {
		height: 32px;
		width: 87%;
		font-size: 12px;
		margin-left: 16px;
		padding-bottom: 7px;
	}

	.parent-view-style {
		width: 86%;
		display: flex;
		align-items: center;
		border-bottom: #c8c7cc solid 1px
	}

	.parent-view-style2 {
		width: 86%;
		display: flex;
		align-items: center;
		border-bottom: #00aa7f solid 1.8px
	}

	.text-style {
		width: 100px;
		padding-bottom: 7px;
	}

	.include-image-style {
		padding-bottom: 7px;
		height: 32px;
		width: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img-style {
		width: 14px;
		height: 14px;
	}

	.pull-down-parent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		width: 250px;
	}
</style>

注：用于本人学习记录，由于个人学识浅薄，欢迎留言你的建议，不胜感激…

标签：picker,...,false,bottom,微信,app,IDNumber,width,inputValue
来源： https://blog.csdn.net/qq_41930094/article/details/112177191