uniapp picker手动弹出 || 自定义触发

this.Bug不是我写的

已于 2022-12-23 14:28:34 修改

阅读量5.6k

点赞数 6

分类专栏： uniapp JavaScript 文章标签：前端小程序 javascript

于 2022-12-23 14:27:01 首次发布

本文链接：https://blog.csdn.net/Moy1237/article/details/128419066

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

uniapp

2 篇文章 0 订阅

订阅专栏

当需要在uni-app中手动触发picker时，由于官方不直接支持，可以采用uni-popup结合picker-view实现。通过创建一个底部弹出层uni-popup，并在其中嵌入picker-view，设置相关样式和事件监听，实现手动触发选择的效果。关键点包括popup的z-index设置、picker-view的使用以及绑定事件处理函数如pickerCancel和pickerConfirm。

摘要由CSDN通过智能技术生成

uniapp picker手动弹出||手动触发

需求

今天遇到一个需求需要在搜索后点击按钮触发picker。去看了官方文档，picker并不支持用函数触发，找了一圈有说用ref，实测无效

解决方案

uni-popup + picker-view 完美解决

上代码

<uni-popup ref="pickerView" type="bottom" style="z-index: 9999999;">
			<div class="popup-view">
				<div class="popup-view-header">
					<div class="popup-view-cancel" @click="pickerCancel"> 取消 </div>
					<div class="popup-view-confirm" @click="pickerConfirm"> 完成 </div>
				</div>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in dataList" :key="index">{{item.presentation}}</view>
					</picker-view-column>
				</picker-view>
			</div>
</uni-popup>

data(){
	return{
		visible: true,
		indicatorStyle: `height: 68rpx;`,
	}
}
pickerCancel() {
	this.$refs.pickerView.close();
},
pickerConfirm() {
	this.$refs.pickerView.close();
},
bindChange(e){
	this.selectedData = this.dataList[e.target.value];
}

.popup-view {
	background-color: #FFFFFF;
	.popup-view-header {
		text-align: center;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F5F5F5;
		div {
			max-width: 50%;
			height: 100%;
			box-sizing: border-box;
			padding: 0 28rpx;
			font-size: 34rpx;
			line-height: 90rpx;
			&:first-child {
				color: #888888;
			}
			&:last-child {
				color: #007aff;
			}
		}
	}
	.picker-view {
		width: 100%;
		height: 476rpx;
		margin-top: 20rpx;
		.item {
			height: 68rpx !important;
			line-height: 68rpx;
			text-align: center;
			color: #000;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			cursor: pointer;
		}
	}
}