v3 uniapp popup + picker
时间: 2025-05-24 18:09:26 浏览: 21
### 关于 uni-app V3 中 Popup 和 Picker 组件结合使用
在开发移动应用界面时,Popup 和 Picker 是两个常用的组件。Popup 提供了一个弹出层容器,而 Picker 则用于实现选择器功能[^1]。
#### 实现思路
为了使这两个组件协同工作,在点击页面上的某个按钮或其他触发事件后,可以打开一个包含 Picker 的 Popup 层。当用户完成选项的选择并确认之后,关闭 Popup 并处理所选数据。
#### 示例代码
下面是一个简单的例子来展示如何集成这两者:
```html
<template>
<view class="content">
<!-- 触发显示popup的按钮 -->
<button type="primary" @click="showPopup = true">选择日期</button>
<!-- popup组件包裹着picker组件 -->
<uni-popup ref="popup" :show="showPopup" position="bottom" mode="fixed"
@touchmove.stop.prevent catchtouchmove="true"
@change="onChange">
<picker mode="date" :value="date" start="2015-09-01" end="2025-09-01" @change="bindDateChange">
<view class="picker">
当前选择: {{ date }}
</view>
</picker>
<!-- 确认按钮 -->
<button type="default" size="mini" @click="confirmSelection">确定</button>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
showPopup: false,
date: '请选择...'
};
},
methods: {
onChange(e) {
this.showPopup = e.detail.show;
},
bindDateChange(e) {
this.date = e.target.value;
},
confirmSelection(){
console.log('Selected Date:',this.date);
this.showPopup=false; // 隐藏popup
}
}
};
</script>
```
此示例展示了通过 `uni-popup` 创建底部滑动出来的弹窗,并在其内部放置了 `picker` 来让用户挑选日期。当选定日期后,可以通过点击 "确定" 按钮隐藏弹窗并将选定的结果打印出来。
阅读全文
相关推荐



















