当前位置：首页 > uni-app

uniapp弹出选择

2026-03-04 21:28:04uni-app

uniapp 弹出选择实现方法

在 uniapp 中实现弹出选择功能可以通过以下几种方式完成，具体取决于需求和场景。

使用 `uni.showActionSheet` 实现底部弹出选择

uni.showActionSheet 是 uniapp 提供的原生底部操作菜单 API，适合简单的选项选择。

uni.showActionSheet({
  itemList: ['选项1', '选项2', '选项3'],
  success: function (res) {
    console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
  },
  fail: function (res) {
    console.log(res.errMsg);
  }
});

使用 `uni.showModal` 实现对话框选择

uni.showModal 可以实现带有确认和取消按钮的对话框，适合简单的二选一场景。

uni.showModal({
  title: '提示',
  content: '确定要执行此操作吗？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

使用第三方组件库实现复杂选择

对于更复杂的选择需求，可以使用第三方组件库如 uView 或 uni-ui 中的选择器组件。

<template>
  <view>
    <u-picker 
      :show="showPicker" 
      :columns="columns" 
      @confirm="confirm" 
      @cancel="cancel"
    ></u-picker>
    <button @click="showPicker = true">打开选择器</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      columns: [
        ['选项1', '选项2', '选项3']
      ]
    };
  },
  methods: {
    confirm(e) {
      console.log(e);
      this.showPicker = false;
    },
    cancel() {
      this.showPicker = false;
    }
  }
};
</script>

自定义弹出层实现选择

通过 uni-popup 组件或自定义 position: fixed 的层实现更灵活的弹出选择。

<template>
  <view>
    <button @click="showPopup = true">打开自定义选择</button>
    <view class="popup" v-if="showPopup">
      <view class="popup-content">
        <view @click="selectOption('选项1')">选项1</view>
        <view @click="selectOption('选项2')">选项2</view>
        <view @click="selectOption('选项3')">选项3</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  },
  methods: {
    selectOption(option) {
      console.log(option);
      this.showPopup = false;
    }
  }
};
</script>

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>

使用 `picker` 组件实现选择

uniapp 内置的 picker 组件适合表单中的选择场景，支持多种模式如普通选择器、时间选择器、日期选择器等。

<template>
  <view>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view>当前选择：{{array[index]}}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      array: ['选项1', '选项2', '选项3'],
      index: 0
    };
  },
  methods: {
    bindPickerChange(e) {
      this.index = e.detail.value;
    }
  }
};
</script>

以上方法覆盖了从简单到复杂的各种弹出选择场景，可以根据具体需求选择合适的方式。

uniapp弹出选择