uniapp弹出选择

uniapp实现弹出选择的方法

使用官方<picker>组件

uniapp内置了<picker>组件，支持多种选择模式（普通选择器、时间选择器、日期选择器等）。基础用法示例：

<template>
  <view>
    <picker mode="selector" :range="options" @change="handleChange">
      <button>点击选择</button>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    handleChange(e) {
      console.log('选中值:', this.options[e.detail.value])
    }
  }
}
</script>

使用uni.showActionSheet

对于简单的底部弹出选择菜单，可以使用API方式：

uni.showActionSheet({
  itemList: ['选项A', '选项B', '选项C'],
  success: function(res) {
    console.log('选中索引:' + res.tapIndex)
  }
})

自定义弹窗组件

需要更复杂的UI时，可以创建自定义组件：

<template>
  <view>
    <button @click="showModal = true">打开选择</button>
    <view class="modal" v-if="showModal">
      <view v-for="(item,index) in items" :key="index" @click="selectItem(index)">
        {{item}}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      items: ['红色','蓝色','绿色']
    }
  },
  methods: {
    selectItem(index) {
      console.log(this.items[index])
      this.showModal = false
    }
  }
}
</script>

第三方UI库

常用的uniapp UI库如uView、ColorUI等提供了增强型选择器：

// uView示例
this.$u.actionSheet({
  list: [
    { text: '保存到相册' },
    { text: '分享给好友' }
  ],
  callback: res => {
    console.log(res)
  }
})

日期时间选择

对于日期时间选择，可使用专用picker：

<picker mode="date" :value="date" @change="dateChange">
  <view>当前选择: {{date}}</view>
</picker>

注意事项

• 移动端需考虑弹出层定位和滚动穿透问题
• 复杂选择器建议分装成单独组件
• H5端部分样式需要特殊处理
• 支付宝小程序等平台可能有特殊限制