当前位置：首页 > uni-app

uniapp弹出选择

2026-01-14 18:17:39uni-app

实现方式一：使用uni.showActionSheet

在UniApp中，可以通过uni.showActionSheet实现底部弹出的选择菜单。该方法支持自定义选项列表和回调处理。

代码示例：

uni.showActionSheet({
  itemList: ['选项1', '选项2', '选项3'],
  success: (res) => {
    console.log('选中选项索引:', res.tapIndex);
  },
  fail: (err) => {
    console.log('取消选择:', err);
  }
});

参数说明：

itemList：数组类型，定义显示的选项文本。
success：选择后的回调，res.tapIndex返回选中项的索引（从0开始）。
fail：取消选择或调用失败时的回调。

实现方式二：自定义弹窗组件

如需更灵活的样式或交互，可通过自定义组件实现。例如封装一个<popup-selector>组件，结合v-if控制显隐。

组件示例：

<template>
  <view>
    <button @click="showPopup = true">打开选择器</button>
    <popup-selector 
      v-if="showPopup"
      :options="options"
      @select="handleSelect"
      @close="showPopup = false"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      options: ['选项A', '选项B', '选项C']
    };
  },
  methods: {
    handleSelect(index) {
      console.log('选中:', this.options[index]);
    }
  }
};
</script>

组件逻辑：

通过v-if动态控制弹窗显示。
options传递选项数据，@select事件返回选中索引。

实现方式三：第三方UI库

使用如uView UI或uni-ui等库的现成组件，快速实现复杂选择弹窗。

uView示例：

<template>
  <u-action-sheet 
    :list="actionList" 
    v-model="showAction" 
    @click="handleClick"
  />
</template>

<script>
export default {
  data() {
    return {
      showAction: false,
      actionList: [{ text: '删除' }, { text: '分享' }]
    };
  },
  methods: {
    handleClick(index) {
      console.log('操作:', this.actionList[index].text);
    }
  }
};
</script>

优势：

uniapp弹出选择