uniapp 底部弹窗选择器

### 如何在 UniApp 实现底部弹窗选择器 #### 底部弹窗选择器概述 UniApp 提供了多种方式来创建交互性强的用户界面组件，其中包括底部弹窗选择器。通过使用官方提供的 `PickerView` 和扩展组件 `Popup` 可以轻松构建此类功能[^2]。 #### 创建底部弹窗选择器的具体实现 ##### 组件结构设计 为了使代码更加模块化和易于维护，建议将底部弹窗选择器封装成独立的 Vue 组件。这不仅提高了代码重用率，还简化了页面逻辑与视图之间的耦合度。 ##### HTML 结构 ```html <template> <view class="selector-container"> <!-- 触发按钮 --> <button @click="toggleSelector">点击选择</button> <!-- 弹出层容器 --> <uni-popup ref="popupRef" type="bottom"> <picker-view indicator-style="height: 50px;" :value="selectedValue" @change="onChange"> <picker-view-column v-for="(column, index) in columnsData" :key="index"> <div v-for="(item, idx) in column" :key="idx">{{ item }}</div> </picker-view-column> </picker-view> <!-- 确认取消按钮 --> <view class="btn-group"> <button @click="onCancel">取消</button> <button @click="onConfirm">确认</button> </view> </uni-popup> </view> </template> ``` ##### JavaScript 部分 ```javascript <script setup lang="ts"> import { ref } from 'vue'; import { uniPopup } from '@dcloudio/uni-ui'; const popupRef = ref(null); let selectedValue = ref([0]); const columnsData = [ ['选项一', '选项二', '选项三'], ]; function toggleSelector() { popupRef.value.open(); } function onChange(event) { const { value } = event.detail; selectedValue.value = value; } function onCancel() { popupRef.value.close(); } function onConfirm() { console.log('Selected:', columnsData.map((col, i) => col[selectedValue.value[i]])); popupRef.value.close(); } </script> ``` ##### CSS 样式调整 适当设置样式可以让用户体验更佳： ```css <style scoped> .selector-container button { width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #f7f8fa; border-radius: 8px; margin-bottom: 10px; } .btn-group { display: flex; justify-content: space-around; padding: 10px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .9); } .btn-group button { flex-grow: 1; min-width: 80px; max-width: 120px; font-size: 16px; color: #3cc51f; background-color: transparent; border: none; outline: none; } </style> ``` 此方案利用了 `PickerView` 来显示滚动列表，并借助 `uni-popup` 控制弹窗行为，实现了简洁而高效的底部弹窗选择效果。